Load multiple component in the same router-outlet with angular2

前端 未结 1 1643
粉色の甜心
粉色の甜心 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: `<h1>I am the Master of components</h1>
      <hr />
      <div #puppetContainer></div>
      `
    })
    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)
提交回复
热议问题