ngForTemplate - 通过 ContentChild 使用模板，或退回到默认值

Question

使用 Angular 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（如果存在），否则回退到 defaultItemTemplate（第 4 行）
- 创建了一个 defaultItemTemplate，使用 @ViewChild(TemplateRef) 获取对嵌入式默认模板的引用

那个 plunkr 可以在 https://embed.plnkr.co/QtMk3h/

找到

当运行时，我收到此异常：

Error in ./DynamicListComponent class DynamicListComponent - inline template:0:29

我不确定我做错了什么，因为设置 *ngForTemplate="itemTemplate" 有效，但 *ngForTemplate="defaultItemTemplate" 或 *ngForTemplate="itemTemplate || defaultItemTemplate" 都无效。

我做错了什么？

我还注意到 *ngFor 已被弃用，所以也许我现在以错误的方式处理这个问题？

Answer 1

我使用 Angular4 重写了这个 plnkr + 添加了 else 子句。

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];
  }

ngForTemplate - 通过 ContentChild 使用模板，或退回到默认值

ngForTemplate - use template via ContentChild, or fall back to default

ngfor

angular