ngForTemplate - ContentChild経由でテンプレートを使用するか、デフォルトに戻す

Question

角度を使用する4.0.3

配列をリストとして表示するためにコンポーネントを作成しようとしています。このコンポーネントにテンプレートを渡すオプションが必要です。テンプレートが渡された場合、それを使ってリストがレンダリングされます。それ以外の場合は、埋め込みテンプレートを使用してレンダリングする必要があります。

Plunkrは私がしようとしていることを部分的に解決しています。テンプレートをコンポーネントに渡し、それを使ってコンポーネントをレンダリングする方法を示しています。それはここに見つけることができます：https://embed.plnkr.co/ollxzUhka77wIXrJGA9t/

私はそれをフォークし、必要なデフォルトのテンプレート機能を追加しようとしました。これを行うには、私がしました：src/app.tsで

• を：

  • はテンプレートなし（ライン29-30）src/dynamic-list.component.tsで

• とdynamic-listコンポーネントのインスタンスを追加しました：

  • フォールバックテンプレート（行5-7）を追加しました
  • は、埋め込まれたデフォルトのテンプレート

への参照を取得するために@ViewChild(TemplateRef)を使用して、それが他のdefaultItemTemplate作成しdefaultItemTemplate（ライン4）

にフォールバック、存在する場合itemTemplateを使用するngForTemplate参照を修正しますそのplunkrは次の場所にあります。https://embed.plnkr.co/QtMk3h/

実行時には、この例外が発生します。

./DynamicListComponentクラスDynamicListComponentで

エラー - インラインテンプレート：0：29

私は*ngForTemplate="itemTemplate"作品を設定するなど、私が間違ってやっているかわからないんだけど、どちらも*ngForTemplate="defaultItemTemplate"か*ngForTemplate="itemTemplate || defaultItemTemplate"にはありません。

私は間違っていますか？

また、*ngForは廃止されていることに気付きました。今は間違った方法でこれに近づいていますか？

Answer 1

私はAngular4 + added else節を使ってこのplnkrを書き直します。

https://plnkr.co/edit/i3czMfuziB9eWkiepEW0?p=preview

@Component({ 
    selector: 'dynamic-list', 
    template: `<div *ngFor="let item of items"> 
     <ng-container *ngIf="itemTemplate;else elseBlock"> 
      <ng-container *ngTemplateOutlet="itemTemplate; context: {\$implicit:item}"></ng-container> 
     </ng-container> 
    </div> 

    <ng-template #elseBlock>else</ng-template> 
    ` 
    }) 
    export class DynamicListComponent { 

    @ContentChild(TemplateRef) 
    public itemTemplate: TemplateRef; 

    @Input() 
    public items: number[]; 

    ngAfterContentInit() { 
     console.log(this.itemTemplate); 
    } 
    } 


    @Component({ 
    selector: 'dynamic-list-item', 
    template: `<div> 
      Template Item #:{{item}} 
    </div>` 
    }) 
    export class DynamicListItemTemplateComponent { 
    @Input() public item: number; 
    } 

    @Component({ 
    selector: 'my-app', 
    providers: [], 
    template:` 
    <h3>Inline</h3> 

    <h3>Default</h3> 
    <dynamic-list [items]="items"> 
    </dynamic-list> 

    <h3>Not Default</h3> 
    <div *ngFor="let item of items"> 
    <div> 
    Inline template item #: {{item}} 
    </div> 
    </div> 


    <h3>List component with inline template</h3> 
    <dynamic-list [items]="items"> 
    <ng-template let-item> 
     Inline template item #: {{item}} 
    </ng-template> 
    </dynamic-list> 


    <h3>List component with component template</h3> 
    <dynamic-list [items]="items"> 
    <dynamic-list-item template="let item" [item]="item"></dynamic-list-item> 
    </dynamic-list> 

    `, 
    }) 
    export class App { 
    private items = [1, 2, 3, 4]; 
    }