动态添加辅助命名路由器出口

Question

我想添加一个<router-outlet name="param"></router-outlet> 运行时。

使用此代码new RouterOutlet(this.parentOutletMap, this.rox, this.resolver, 'test');，添加了router-outlet，但是当我调用路由时出现错误

"zone.js:357 Error: Uncaught (in promise): Error: Cannot find the outlet test to load 'AuxComponent'"

尝试在主 AppComponent 中动态添加 router-outlet，一切正常，错误仅在延迟加载的模块中。

好像this.router.navigateByUrl和this.router.navigate，只能用 父出口地图而不是子地图。

Plnkr：http://plnkr.co/edit/0W5oZuCTE4dvkNhbvs52?p=preview

GitHub：https://github.com/fabriziodebortoli/dynamic-routing/

代码：

app.routing

export const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'page',
        loadChildren: () => new Promise(function (resolve) {
            (require as any).ensure([], function (require: any) {
                resolve(require('../pages/page.module').default);
            });
        })
    }
];

page.module

export const routing: ModuleWithProviders = RouterModule.forChild([
  { path: '', component: PageComponent },
  {
    path: 'wrap', component: PageComponent, children: [
      { path: 'test', component: AuxComponent, outlet: 'test' }
    ]
  },
]);

@NgModule({
  imports: [ CommonModule, FormsModule, routing],

  // added after Günter comment
  // entryComponents: [RouterOutlet], RouterOutlet is not a Component
  entryComponents: [OutletComponent],

  declarations: [PageComponent],
  exports: [PageComponent]
})
export default class PageModule {}

page.component

@Component({
    template: `Page 
        <hr>
        <button (click)="createRouterOutlet('test')">add</button>
        <button (click)="go()">go</button>
        <div #rox></div>`
})
export class PageComponent implements OnInit {

    @ViewChild('rox', { read: ViewContainerRef }) rox: ViewContainerRef;

    constructor(private router: Router,
        private parentOutletMap: RouterOutletMap,
        private resolver: ComponentFactoryResolver
    ) { }

    ngOnInit() {
        console.info(this.parentOutletMap);
    }

    createRouterOutlet(name: string) {
        // commented after Günter comment
        // let ro: RouterOutlet = new RouterOutlet(this.parentOutletMap, this.rox, this.resolver, name);
        // console.info(this.parentOutletMap);

        // added after Günter comment
        let factory = this.resolver.resolveComponentFactory(OutletComponent);
        let cmpRef = this.ros.createComponent(factory);
        console.info(cmpRef);
    }

    go() {
        this.router.navigateByUrl('/page/wrap/(test:test)');
    }
}

编辑：我尝试使用自定义组件 OutletComponent 包装 RouterOutlet，但我收到错误消息“找不到用于加载 'AuxComponent' 的插座测试”

outlet.component

import { Component } from '@angular/core';

@Component({
  selector: 'app-outlet',
  template: `<router-outlet [attr.name]="name"></router-outlet>`
})
export class OutletComponent{
  private name: string = 'test';
}

Answer 1

您不能使用new 创建组件，这只会创建组件类的实例，但没有任何实际使其成为 Angular2 组件的东西。

let factory = this.componentFactoryResolver.resolveComponentFactory(RouterOutlet);
this.cmpRef = this.rox.createComponent(factory)
/// this.comRef.instance... to access the router outlet instance