定义

在Angular中，根据定义为：

Angular的元素定义了一个默认不被渲染的模板。

默认情况下使用模版是不会渲染的，但是在官方例子中有一个有意思的例子，

import { Component, ViewChild } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
<input #ref1 type="text" [(ngModel)]="firstExample" />
<!-- 会显示 -->
<ng-template [ngIf]="true">
  <span>Value: {{ ref1.value }}</span>
</ng-template>
<br />
<!-- 不会显示 -->
<ng-template *ngIf="true">
  <span>Value: {{ ref1.value }}</span>
</ng-template>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  firstExample = '';
}

在这个例子中，模版就会被渲染。

根据官方的描述

具有简写语法的简单形式

<div *ngIf="condition">Content to render when condition is true.</div>

等价于

具有扩展语法的简单形式

<ng-template [ngIf]="condition">
  <div>Content to render when condition is true.</div>
</ng-template>

说明

通过，你可以定义模板内容，这些内容只有在你直接或间接地特别指示Angular进行渲染时才会被渲染，让你可以完全控制内容的显示方式和时间。

模版变量文档在这里，但是文档不是特别全，这里专门总结一下模版输入变量：

模版输入变量

官方文档是这样解释的，例子举的不是很明晰，我决定在文档中找一找相关例子。

模板输入变量是可以在模板的单个实例中引用的变量。你可以用 let 关键字声明模板输入变量，比如 let hero。

这里明确几个概念

<ng-template let-demo></ng-template>
其中let-demo是讲模版上下文中的变量绑定到当前模版中，demo我称之为输入变量绑定名，而且这中形式的声明是讲默认输入变量复制到了绑定名中了。
<ng-template let-i="index"></ng-template>，这种形式是，将模版上下文中的具体的变量index赋值给绑定变量名i中。

在ngIf中使用模版输入变量，例子

@Component({
  selector: 'ng-if-as',
  template: `
    <button (click)="nextUser()">Next User</button>
    <br>
    <!-- 
    使用ngIf简写模式，则会隐含一个ng-template包裹这个元素，使用as将结果保存到局部变量中
    其实在这个隐藏模版中的上下文已经包含了user变量，此时是一个默认变量，这样就可以在里面
    的模版中绑定这个变量let-user进行绑定默认变量
    -->
    <div *ngIf="userObservable | async as user; else loading">
      Hello {{user.last}}, {{user.first}}!
    </div>
    <ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
`
})
export class NgIfAs {
  userObservable = new Subject<{first: string, last: string}>();
  first = ['John', 'Mike', 'Mary', 'Bob'];
  firstIndex = 0;
  last = ['Smith', 'Novotny', 'Angular'];
  lastIndex = 0;
  nextUser() {
    let first = this.first[this.firstIndex++];
    if (this.firstIndex >= this.first.length) this.firstIndex = 0;
    let last = this.last[this.lastIndex++];
    if (this.lastIndex >= this.last.length) this.lastIndex = 0;
    this.userObservable.next({first, last});
  }
}

将输入变量绑定名变一下也可以。
具体看注释：

import { Component, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
  selector: 'app-root',
  template: `
  <button (click)="nextUser()">Next User</button>
  <br>
  <div *ngIf="userObservable | async as user; else loading">
    Hello {{user.last}}, {{user.first}}!
  </div>
  <!-- 输入变量绑定名改变了，也不会有影响 -->
  <ng-template #loading let-user1>Waiting... (user is {{user1|json}})</ng-template>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  userObservable = new Subject<{ first: string; last: string }>();
  first = ['John', 'Mike', 'Mary', 'Bob'];
  firstIndex = 0;
  last = ['Smith', 'Novotny', 'Angular'];
  lastIndex = 0;
  nextUser() {
    let first = this.first[this.firstIndex++];
    if (this.firstIndex >= this.first.length) this.firstIndex = 0;
    let last = this.last[this.lastIndex++];
    if (this.lastIndex >= this.last.length) this.lastIndex = 0;
    this.userObservable.next({ first, last });
  }
}

关于模版输入变量再来看这个例子：
具体看注释：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr>
    <!-- 手动挂载上下文context: myContext -->
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr>
    <!-- 手动挂载上下文context: myContext -->
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr>
    <ng-template #greet><span>Hello</span></ng-template>
    <!-- 将上下文绑定到当前模版中，let-name，形式是绑定上下文默认值 -->
    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
    <!-- 将上下文绑定到当前模版中，let-person="localSk"，形式是绑定
             上下文中的localSk变量绑定到person中 -->
    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
  myContext = {
    $implicit: 'World'/* 上下文中，默认输入的值 */,
    localSk: 'Svet' /* 上下文中，具体输入的值 */
  };
}

写给你我的知识

Angular中模版`ng-template`的知识

定义

说明

模版输入变量

相关链接