Load multiple component in the same router-outlet with angular2

前端 未结 1 1647
粉色の甜心
粉色の甜心 2021-01-18 09:20

I have the following template for the root component of my angular2 app:

1条回答
  •  一向
    一向 (楼主)
    2021-01-18 10:12

    Only one component can be assigned with a Route, What you may do is add a parent component consisting of DataSummaryComponent & AskSummaryComponent and configure it in the route.

    Update:

    As mentioned in comment you may create a generic component which loads components dynamically using data property configuration in route,

    Route configuration

    const appRoutes: Routes = [
      { path: '',   redirectTo: '/route1', pathMatch: 'full' },
      { path: 'route1',  component: MasterComponent, data: {puppets : [PuppetComponent1]} },
      { path: 'route2',  component: MasterComponent,  data: {puppets : [PuppetComponent2, PuppetComponent3]}},
      { path: 'route3',  component: MasterComponent,  data: {puppets : [PuppetComponent1, PuppetComponent2, PuppetComponent4]}}
    ];
    

    Master Component

    @Component({
      template: `

    I am the Master of components


    ` }) class MasterComponent { @ViewChild('puppetContainer', { read: ViewContainerRef }) puppetContainer: ViewContainerRef; constructor( private router: Router, private route: ActivatedRoute, private _componentFactoryResolver: ComponentFactoryResolver, private viewContainer: ViewContainerRef) { } ngOnInit(){ this.route.data .subscribe(data => { if(!!data && !!data.puppets && data.puppets.length > 0){ data.puppets.map(puppet => { let componentFactory = this._componentFactoryResolver.resolveComponentFactory(puppet); this.puppetContainer.createComponent(componentFactory); }); } }); } }

    Check this Plunker!!

    Hope this helps!!

    0 讨论(0)
提交回复
热议问题