使用ngTemplateOutlet的Angular 2+

Question

我正在嘗試遵循本教程：

https://alligator.io/angular/reusable-components-ngtemplateoutlet/

但是，如果我復制代碼，則無法正常工作。 它顯示：

<ul>
<li></li>
</ul>

代替

<ul>
<li>Static List Template</li>
</ul>

這些屬性仍未定義：

@ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate;
@ContentChild(ListItemDirective, {read: TemplateRef}) listItemTemplate;

編輯：以前的plnkr不正確。 忘了保存。 看到這個：

https://next.plnkr.co/edit/b9kdTXoe8ZRqnuSv?open=lib%2Fapp.ts&deferRun=1&preview

import { Directive } from '@angular/core';
import { Component, ContentChild, Input, TemplateRef } from '@angular/core';

@Directive({
  selector: '[cardItem]'
})
export class CardItemDirective {}

@Directive({
  selector: '[listItem]'
})
export class ListItemDirective {}


@Component({
  selector: 'card-or-list-view',
  template: `
  <ng-container [ngSwitch]="mode">
  <ng-container *ngSwitchCase="'card'">
    <ng-container *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="cardItemTemplate"></ng-container>
    </ng-container>
  </ng-container>
  <ul *ngSwitchCase="'list'">
    <li *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="listItemTemplate"></ng-container>
    </li>
  </ul>
  </ng-container>
  `
})
export class CardOrListViewComponent {

  @Input() items: any[] = [];

  @Input() mode: 'card' | 'list' = 'card';

  // Read in our structural directives as TemplateRefs
  @ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate;
  @ContentChild(ListItemDirective, {read: TemplateRef}) listItemTemplate;

}


@Component({
  selector: 'app-usage',
  template: `
    <card-or-list-view
        [items]="items"
        [mode]="mode">
      <div cardItem>
        Static Card Template
      </div>
      <li listItem>
        Static List Template
      </li>
    </card-or-list-view>
`
})
export class UsageExample {
  mode = 'list';
  items = [
    {
      header: 'Creating Reuseable Components with NgTemplateOutlet in Angular',
      content: 'The single responsibility principle...'
    } // ... more items
  ];
}

Answer 1

您必須將模板放入<ng-template>或使用星號前綴語法，以便可以將其與結構性指令一起使用 ：

<ng-template listItem>
  <li>
    Static List Template
  </li>
</ng-template>

或更短：

<li *listItem>
  Static List Template
</li>

注意：您將有兩個與此嵌套的li標簽。 也許不是您想要的...

Answer 2

您是正確的，因為永遠不會定義ContentChildren，所以它們始終是未定義的。 ngTemplateOutlet將templateRef或組件作為參數，由於您的內容子級從不渲染，因此從未在代碼中的任何位置定義它。 我個人更喜歡去ViewContainerRef / ComponentFactoryResolver路線： https : //angular.io/guide/dynamic-component-loader

這使您可以更精細地控制組件，並可以通過編程方式設置@Input變量。 希望這可以幫助