ngForTemplate - 通過ContentChild使用模板，或退回到默認

Question

採用了棱角分明4.0.3

我試圖創建一個組件來顯示一個數組作爲一個列表。我需要選擇將模板傳遞給此組件。如果傳遞一個模板，該列表將使用它來呈現。否則，應該使用嵌入的模板進行渲染。

我發現了一個Plunkr，它部分地解決了我想要做的事 - 它顯示瞭如何將模板傳遞給組件，並讓組件呈現使用它。它可以在這裏找到：https://embed.plnkr.co/ollxzUhka77wIXrJGA9t/

我已經分叉它，並嘗試添加所需的默認模板功能。要做到這一點，我已經：

• 在src/app.ts：

  • 增加了dynamic-list組件的一個實例，沒有模板（29-30行）

• 在src/dynamic-list.component.ts：

  • 添加了後備模板（第5-7行）
  • 修改了ngForTemplate參考使用itemTemplate如果它存在，否則回落到創建一個defaultItemTemplatedefaultItemTemplate（4號線）
  • ，使用@ViewChild(TemplateRef)去嵌入的默認模板

參考那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]; 
    }