使用 Angular 9 中的占位符选择器

在 Angular 9 中，占位符选择器是一种特殊的指令，帮助我们在父组件中选择特定的子组件。这个功能非常有用，特别是在处理模板或视图时。

基本用法

占位符选择器由两个重要元素组成：

1. 在父组件中声明占位符选择器。

<ng-template my-placeholder></ng-template>

2. 在子组件中使用这个占位符选择器。

<ng-container *ngTemplateOutlet="myPlaceholder"></ng-container>

在这个例子中，我们在父组件中声明了一个 my-placeholder 的占位符选择器。在子组件中，我们使用 ng-container 元素来引用这个占位符选择器，并在 *ngTemplateOutlet 指令中指定它的名字：myPlaceholder。

添加内容

我们可以使用占位符选择器来为子组件添加内容。父组件中，我们可以添加一些额外的 HTML 元素或其他 Angular 指令。

<ng-template my-placeholder>
  <p>Hello world</p>
  <button (click)="foo()">Click me!</button>
</ng-template>

在这个例子中，我们为 my-placeholder 占位符选择器添加了一些 HTML 元素和一个按钮。当 Angular 渲染子组件时，这些元素将被添加到子组件的内容中。

动态占位符选择器

我们也可以根据某些条件来动态选择不同的子组件。在这种情况下，我们可以使用 ngIf 或 ngSwitch 指令来动态切换占位符选择器。

例如，我们可以在父组件中使用 ngIf 指令根据某些条件来动态选择子组件。

<ng-template [ngIf]="isFoo">
  <app-foo></app-foo>
</ng-template>

<ng-template [ngIf]="!isFoo" my-placeholder></ng-template>

在这个例子中，如果 isFoo 为真，那么应用 app-foo 子组件。否则，使用 my-placeholder 占位符选择器。

结论

占位符选择器是 Angular 9 中一个非常有用的功能，可以帮助我们选择和自定义子组件的内容。通过动态的占位符选择器，我们可以根据不同的条件来选择不同的子组件。在处理模板或视图时，这个功能可以让我们的代码更简洁和易于维护。

参考

• Angular 9.0.0-rc.6