オンザフライでレンダリング中の角度2の子コンポーネントの順序を変更してください

Question

私は角度2の世界では少しばかりですので、素朴な質問があればよろしくお願いします。

ページの表示に必要なさまざまなコンポーネントのメタが含まれているjsonファイルを読みたいと思います。

私はこのjsonを読んで、ここにリストされている順序で子コンポーネントをレンダリングする必要があります。

私は、アンカー2が提供する動的コンポーネントローダーAPIを使用して、forループ内の子コンポーネントを動的にロードしました。しかし、このAPIの使用を少し複雑にするいくつかの要件があります。

私は同じことをする別の方法を探しています。親コンポーネントのtsファイル内からDOMを操作して、JSONで述べたのと同じ順序で子コンポーネントを取得するようなものです。

すべてのリードが非常に役に立ちます。 ありがとう！

PS：コードを公開しないと申し訳ありません。私はこれを私のモバイルを使って掲示しました。あなたがDynamicComponentLoaderを使用しない場合

Answer 1

は、私はすべての可能なコンポーネントをラップし、選択された一つだけをレンダリングする要素を使用しての唯一のオプション参照（同じ制限がViewContainerRef.createComponent()の非推奨）

@Component({ 
    selector: 'wrapper-component', 
    directives: [Cmp1, Cmp2, Cmp3, ... Cmp10], 
    template: ` 
    <div [ngSwitch]="type"> 
     <cmp1 *ngSwitchCase="'cmp1'"></cmp1> 
     <cmp2 *ngSwitchCase="cmp2"></cmp2> 
     <cmp3 *ngSwitchCase="cmp3"></cmp3> 
     .... 
     <cmp10 *ngSwitchCase="cmp4"></cmp4> 
     <div *ngSwitchDefault>not supported</div> 
    </div> 
`}) 
export class WrapperComponent { 
    @Input() type:string; 
} 

と同様に使用してください。

@Component({ 
    selector: 'parent-cmp', 
    template: ` 
    <wrapper-component *ngFor="let item of someJson" [type]="item.componentName"></wrapper-component> 
    `}) 
export class ParentComponent { 
    someJson; // assign the JSON here 
}