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

问题描述

我的 angular2 应用程序的根组件有以下模板:

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

<div class="main__right-area"><router-outlet name="right-zone"></router-outlet>

</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"从@angular/router"导入{路由}出口const AppRoutes:路线= [{小路: ""，组件:HomeSummaryComponent，出口:左区"},{小路: ""，组件:DataSummaryComponent，出口:右区"}];

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

<代码>{小路: ""，组件:[ DataSummaryComponent, AskSummaryComponent ],出口:右区"}

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

谢谢

解决方案

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

更新:

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

路由配置

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

主组件

@Component({模板:`<h1>我是组件的主人</h1><小时/><div #puppetContainer></div>`})类主组件{@ViewChild('puppetContainer', { read: ViewContainerRef }) puppetContainer: ViewContainerRef;构造函数(专用路由器:路由器，私人路线:ActivatedRoute，私有 _componentFactoryResolver: ComponentFactoryResolver,私有视图容器:ViewContainerRef) {}ngOnInit(){this.route.data.订阅(数据=> {if(!!data && !!data.puppets && data.puppets.length > 0){data.puppets.map(puppet => {让 componentFactory = this._componentFactoryResolver.resolveComponentFactory(puppet);this.puppetContainer.createComponent(componentFactory);});}});}}

检查这个Plunker!!

希望这有帮助！！

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>

And the following routes:

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"
}

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?

Thanks

解决方案

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!!

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