使用angular2在同一路由器出口中加载多个组件 [英] Load multiple component in the same router-outlet with angular2

问题描述

对于我的angular2应用的根组件，我有以下模板:

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

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet name="left-zone"></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="right-zone"></router-outlet>
    </div>
  </div>
</main>

以及以下路线:

import { HomeSummaryComponent } from "../components/home-summary/home-summary.component"
import { DataSummaryComponent } from "../components/data-summary/data-summary.component"
import { AskSummaryComponent } from "../components/ask-summary/ask-summary.component"

import { Routes } from "@angular/router"

export const AppRoutes: Routes = [
  {
    path: "",
    component: HomeSummaryComponent,
    outlet: "left-zone"
  },
  {
    path: "",
    component: DataSummaryComponent,
    outlet: "right-zone"
  }
];

它实际上工作得很好，但是我希望能够在右侧区域"(以及实际上在左侧区域)中加载多个组件.这个想法将是这样的:

It actually works pretty well, but I'd like to be able to load more than a single component in the "right-zone" (and in the left one as well actually). The idea would be to have something like this:

{
  path: "",
  components: [ DataSummaryComponent, AskSummaryComponent ],
  outlet: "right-zone"
}

控制器将一个接一个地添加.目前支持吗?如果否，是否可以扩展现有的RouterOutlet?

The controllers would just be appended one after one. Is it currently supported? If no, is it possible to extend the existing RouterOutlet to do so?

谢谢

推荐答案

只能为一个路由分配一个组件，您可以做的是添加一个由DataSummaryComponent & AskSummaryComponent组成的父组件，并在该路由中对其进行配置.

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.

更新:

如注释中所述，您可以创建一个通用组件，该组件使用路由中的数据属性配置动态加载组件，

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

路由配置

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]}}
];

主组件

@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);
                });
              }
           });
    }

}

检查此柱塞！

希望这会有所帮助！

这篇关于使用angular2在同一路由器出口中加载多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！