Question

当我使用带有then和/或else语句的* ngIf时，为什么必须绑定到附加到ng-template元素的模板变量？例如：

这有效：

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

但这不起作用：

<div *ngIf="show; else elseBlock">Text to show</div>
<div #elseBlock>Alternate text while primary text is hidden</div>

我还注意到添加一个类也不起作用：

<ng-template #elseBlock class="my-class">
  Alternate text while primary text is hidden
</ng-template>

ng-template有什么特别之处？它有什么不同？

Answer 1

这是因为Angular中的所有结构指令都会创建嵌入式视图。使用templateRef和viewContainerRef创建嵌入式视图。您可以在Exploring Angular DOM manipulation techniques using ViewContainerRef。

中详细了解它们

嵌入式视图类似于为组件创建的主机视图。视图包含您在组件模板中或ng-template标记内看到的所有节点。因此嵌入式视图就像没有组件类的组件模板。以下是结构指令如何创建嵌入式视图的几个示例。

ngIf

  private _updateView() {
    if (this._context.$implicit) {
      ...
        if (this._thenTemplateRef) {
          this._thenViewRef =
              // here embedded view is created
              this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
        }
      }
    } else {
      if (!this._elseViewRef) {
       ...
          this._elseViewRef =
              // here embedded view is created
              this._viewContainer.createEmbeddedView(this._elseTemplateRef, this._context);
        }
      }
    }
  }

ngFor

  private _applyChanges(changes: IterableChanges<T>) {
    const insertTuples: RecordViewTuple<T>[] = [];
    changes.forEachOperation(
        (item: IterableChangeRecord<any>, adjustedPreviousIndex: number, currentIndex: number) => {
          if (item.previousIndex == null) {
            // here embedded view is created
            const view = this._viewContainer.createEmbeddedView(
                this._template, new NgForOfContext<T>(null !, this.ngForOf, -1, -1), currentIndex);

Answer 2

ng-template 是Angular如何实现和扩展template标记。

由于所有结构指令，以*开头，如* ngIf，* ngFor等，正在改变DOM，它实际上一直在幕后使用ng-template。放在元素上的指令只是一些语法糖。

else块不能与任何其他元素一起使用，因为它需要在需要时添加，因此它必须在ng-template中。

Here是关于此的更多信息。

Answer 3

这是一个部分答案 - 上课。但也可以在一个地方链接到相关信息。我可以给你一些细节和另一个类似的概念。 <ng-template>是占位符，不仅适用于*ngIf的其他部分，也适用于*NgFor

<ng-container>是类似的，你没有问过，但是在处理内容投射时你会遇到。 video Josh Morony在Youtube上发表了这个问题。它与@ContentChild和@ContentChildren有关。

Angular Cheatsheet告诉你类的语法..

Answer 4

当您想根据条件及其反转显示或隐藏模板的一部分时，

<ng-template>非常“方便”。在您的示例中：

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

它可以让你做你可以做的事情：

<div *ngIf="show">Text to show</div>
<div *ngIf="!show>Alternate text while primary text is hidden</div>

优势在于您可以隔离模板的一部分并在需要时“激活”它，就像JS一样。你可以把它放在后面。它为您提供更多结构化代码。还有（因为我认为Angular 4.3）<..*ngIf="condition"; then #template1 else #template2>也非常“方便”。

什么是ng-template，为什么我要绑定* ngIf呢？

4 个答案:

ngIf

ngFor