javascript - 了解可重用组件中的 ngTemplateOutlet、@ContentChild、ng-container

Question

我花了更多时间试图理解以下博文 Creating Reusable Components with NgTemplateOutlet in Angular

上面帖子的工作代码可以在stackblitz找到.

在 UsageExample 组件中，调用了 card-or-list-view 组件。提供了items 和mode 输入参数，我非常理解。

现在我不明白的是如何

<ng-container *cardItem="let item">
        <h1>{{item.header}}</h1>
        <p>{{item.content}}</p>
      </ng-container>
      <span *listItem="let item">
        <h1>{{item.header}}</h1>
        <p>{{item.content}}</p>
      </span>

在 UsageExample 模板中替换

<ng-container *ngSwitchCase="'card'">
    <div *ngFor="let item of items" style="margin: 5px;border: black 1px solid">
      <ng-container *ngTemplateOutlet="cardItemTemplate; context: {$implicit: item}">
      </ng-container>
    </div>
  </ng-container>
  <ul *ngSwitchCase="'list'">
    <li *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="listItemTemplate; context: {$implicit: item}"></ng-container>
    </li>
  </ul>

在 CardOrListViewComponent 组件的模板中。在 CardOrListViewComponent 组件中，声明了两个指令

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

并在其模板中与 *ngTemplateOutlet 一起使用。

这些指令是如何被替换的

<ng-container *cardItem="let item">
        <h1>{{item.header}}</h1>
        <p>{{item.content}}</p>
      </ng-container>
      <span *listItem="let item">
        <h1>{{item.header}}</h1>
        <p>{{item.content}}</p>
      </span>

在 UsageExample 组件中。

*cardItem 和*listItem 如何连接到CardOrListViewComponent 组件中的两个@ContentChild 指令。他们的名字甚至都不相似。

Answer 1

首先，Angular 结构指令有两种我们可以使用的形式:

1) 加糖版

<div *ngIf="foo">bar</div>

2) 脱糖版

<ng-template [ngIf]="foo">
  <div>bar</div>
</ng-template>

回到你的例子:

<ng-container *cardItem="let item">
  <h1>{{item.header}}</h1>                            sugar
  <p>{{item.content}}</p>
</ng-container>

       ||
       \/

<ng-template cardItem let-item>
  <ng-container>
    <h1>{{item.header}}</h1>                         de-sugar
    <p>{{item.content}}</p>
  </ng-container>
</ng-template>

其次，通常的做法是通过@ViewChild(-dren)|@ContentChild(-dren) 获取对模板中某些内容的引用装饰器。

我们可以查询匹配模板元素的指令。 Angular 始终匹配我们模板的脱糖版本。所以指令:

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

匹配模板:

  selector: '[cardItem]' 
               ||
               \/
<ng-template cardItem let-item>

如果您不想要关于我们可以查询的所有可能情况，请遵循以下答案:

• What are all the valid selectors for ViewChild and ContentChild?

现在我们知道通过使用@ContentChild 查询:

@ContentChild(CardItemDirective) cardItemTemplate;

我们获得了 CardItemDirective 实例，但我们想要获得 TemplateRef 以便在 *ngTemplateOutlet 中使用它。

这里是read选项来拯救:

@ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate;
                                     \/
         please give us TemplateRef instance from the element 
         that matches CardItemDirective selector

最后，有了TemplateRef，我们可以在ngTemplateOutlet 的帮助下渲染它。指令并传递我们想要的任何上下文:

<div *ngFor="let item of items">
  <ng-container *ngTemplateOutlet="cardItemTemplate; context: {$implicit: item}">