angular2のルータを経由した動的子コンポーネント

Question

経路を介して設定されたマスター詳細種類のアプリがあります。マスターコンポーネント

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

ため

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

HTMLは、それは完全に正常に動作します。しかし今、私の子供は異なるタイプとデータを持っています。そのため、DetailsComponentの代わりに、固定で定義済みのDetailsType1Component、DetailsType2Component、DetailsType3Component ...をレンダリングします。ルートに存在するIDに基づいてデータを取得し、それがどのタイプの子であるかを決定し、次にDetailsType1Componentの1つをレンダリングします。

どのように達成できますか？

ありがとうございました

Answer 1

角度は経路が静的であることを要求します。動的なものが必要な場合はRouter.resetConfig関数を提供していますが、別のアプローチを使用する方が良いでしょう。提供されたIDに応じて、詳細コンポーネントを動的にロードできます。我々はいくつかの詳細コンポーネントのコンテナ要素を持っているとしましょう：

@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

Answer 2

あなたはそれにあなたのルーター共通ディテールコンテナコンポーネントとルートを作成することができ、そのコンポーネントでは、あなたの条件に応じて、動的にコンポーネントをロードすることができます。チェック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によって渡さそのローディング動的成分、（）プロパティ