Question

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

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

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

尝试在主AppComponent中动态添加路由器插座，一切正常，错误仅在延迟加载的模块中。

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

动态添加辅助命名路由器插座

1 个答案: