Question

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

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

主组件的html

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

它完美无缺。但现在我的孩子有不同的类型和数据。所以我想要渲染DetailsType1Component，DetailsType2Component，DetailsType3Component ......而不是DetailsComponent，它们是固定的和预定义的。我想基于路由中存在的id来获取数据，然后决定它是什么类型的子节点，然后渲染一个DetailsType1Component ......

如何实现？

由于

Answer 1

您可以创建一个公共详细信息容器组件并将路由器路由到该组件，并且在该组件中，您可以根据您的条件动态加载组件。检查official docs！

container.component.ts

export class ContainerComponent implements OnChanges{
  @Input() component: Type<any>;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnChanges() {
    if(this.component) this.loadComponent();
  }

  loadComponent() {
   let componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.component);

    let viewContainerRef = this.messageHost.viewContainerRef;

    viewContainerRef.clear();

    viewContainerRef.createComponent(componentFactory);
  }
}

container.component.html

<div>
        <!-- placeholder for dynamic components -->
        <ng-template message-host></ng-template>
</div>

在上面的例子中，它的加载动态组件由@Input（）属性

传递

Answer 2

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

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

2 个答案: