angular - 通过angular2中的路由器动态子组件

Question

我有通过路由配置的应用程序的主要细节类型。

    Routes = [
      {
        path: '',
        redirectTo: '/master',
        pathMatch: 'full'
      },
      {
        path: 'master',
        component: MasterComponent,
        children: [
          {
            path: ':id',
            component: DetailsComponent
          }
        ]
      }
   ]

主组件的html

<div>...</div>
<router-outlet></router-outlet>

它工作得很好。但是现在我的 child 有不同的类型和数据。所以我不想渲染 DetailsComponent，而是渲染 DetailsType1Component、DetailsType2Component、DetailsType3Component...，它们是固定的和预定义的。我想根据路由中存在的 id 获取数据，然后确定它是什么类型的 child ，然后呈现 DetailsType1Component 之一......

如何实现？

谢谢

Answer 1

Angular 希望路由是静态的。它提供了 Router.resetConfig如果您需要一些动态功能，但我最好在这里使用另一种方法。您可以根据提供的 ID 动态加载详细信息组件。假设我们有一些 Details Component 容器元素:

@Component({
  selector: 'details-container',
  template: `
    <ng-container *ngComponentOutlet="content"></ng-container>
  `
})
export class DetailsComponent implements OnInit {
  content

  constructor(private route: ActivatedRoute) {
    let id = this.route.snapshot.paramMap.get('id')
    switch (id) {
      case '1':
        this.content = DetailsType1Component
        break
      case '2':
        this.content = DetailsType2Component
        break
      default:
        this.content = DetailsTypeDefaultComponent
    }
  }
}

它使用*ngComponentOutlet 指令加载您需要的组件。在从 url 中读取 id 参数后，在构造函数中决定究竟是哪一个。

Plunkr