ngForTemplate -通过ContentChild使用模板，或者回到默认状态

Question

使用角4.0.3

我正在尝试创建一个组件来将数组显示为一个列表。我需要将模板传递给这个组件的选项。如果传递了模板，则将使用它呈现列表。否则，应该使用嵌入的模板来呈现。

我找到了一个Plunkr，它部分地解决了我想要做的事情--它展示了如何将模板传递给组件，并让组件呈现使用它。它可以在这里找到：https://embed.plnkr.co/ollxzUhka77wIXrJGA9t/

我已经对其进行了分叉，并尝试添加所需的默认模板功能。为了做到这一点，我：

• 在src/app.ts中

- Added an instance of the `dynamic-list` component with no template (lines 29-30)

​

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

- Added a fallback template (lines 5-7)
- Modified the `ngForTemplate` reference to use `itemTemplate` if it exists, else falling back to `defaultItemTemplate` (line 4)
- Created a `defaultItemTemplate`, using `@ViewChild(TemplateRef)` to get a reference to the embedded default template

​

柱塞可以在https://embed.plnkr.co/QtMk3h/找到

当我运行时，我得到了这个异常：

./DynamicListComponent类DynamicListComponent中的错误-内联模板:0:29

我不知道我做错了什么，因为设置*ngForTemplate="itemTemplate"是有效的，但是*ngForTemplate="defaultItemTemplate"或*ngForTemplate="itemTemplate || defaultItemTemplate"都不起作用。

我做错了什么？

我还注意到*ngFor被否决了，所以我现在可能是以错误的方式来处理这个问题吗？

Answer 1

我使用Angular4 + added子句重写这个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];
  }