Angular4+ 的 ng-template 基本使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 Angular4+ 中，ng-template 是一个非常重要的指令，它可以帮助我们实现很多复杂的逻辑和功能。本文将介绍 ng-template 的基本使用教程，帮助读者更好地理解和掌握这个指令。

什么是 ng-template？

ng-template 是 Angular4+ 中的一个指令，它是一个模板容器，可以定义一个模板，然后在需要的地方进行引用。ng-template 本身不会被渲染出来，它只是一个占位符，可以帮助我们实现很多复杂的逻辑和功能。

ng-template 的基本语法

ng-template 的基本语法如下：

<ng-template #templateRef>
  <!-- 模板内容 -->
</ng-template>

其中，#templateRef 是模板的引用，可以在组件内部使用 @ViewChild 或 @ContentChild 获取模板的引用。模板内容可以是任何 HTML 代码，包括组件、指令、表达式等等。

ng-template 的常见用法

1. ngIf 和 ngSwitch

ngIf 和 ngSwitch 是 Angular 中常用的指令，它们可以根据条件判断是否显示某个元素。ngIf 和 ngSwitch 的语法非常简单，可以直接在 HTML 中使用。但是，当我们需要根据条件显示复杂的 HTML 结构时，ngIf 和 ngSwitch 就无法满足我们的需求了。这时，ng-template 就可以派上用场了。

// javascriptcn.com 代码示例
<!-- ngIf 的用法 -->
<div *ngIf="show">
  <!-- 显示的内容 -->
</div>

<!-- ng-template 的用法 -->
<ng-template #ifTemplate>
  <div>
    <!-- 显示的内容 -->
  </div>
</ng-template>

<ng-container *ngIf="show; else elseTemplate">
  <ng-container *ngTemplateOutlet="ifTemplate"></ng-container>
</ng-container>

<ng-template #elseTemplate>
  <div>
    <!-- 隐藏的内容 -->
  </div>
</ng-template>

上面的代码中，我们使用了 ngIf 和 ng-template 来实现了一个复杂的条件判断。当 show 为 true 时，显示 ifTemplate 中的内容，否则显示 elseTemplate 中的内容。

2. ngFor

ngFor 是 Angular 中常用的指令，它可以根据一个数组循环显示多个元素。ngFor 的语法也非常简单，可以直接在 HTML 中使用。但是，当我们需要根据数组中的元素显示复杂的 HTML 结构时，ngFor 就无法满足我们的需求了。这时，ng-template 就可以派上用场了。

// javascriptcn.com 代码示例
<!-- ngFor 的用法 -->
<div *ngFor="let item of items">
  {{ item }}
</div>

<!-- ng-template 的用法 -->
<ng-template #forTemplate let-item>
  <div>
    {{ item }}
  </div>
</ng-template>

<div *ngFor="let item of items; index as i">
  <ng-container *ngTemplateOutlet="forTemplate; context: {$implicit: item, index: i}"></ng-container>
</div>

上面的代码中，我们使用了 ngFor 和 ng-template 来实现了一个复杂的循环显示。我们先定义了一个 forTemplate 模板，然后在循环中使用 *ngTemplateOutlet 来引用模板，并且通过 context 传递了当前循环的元素和索引。

3. 动态组件

在 Angular 中，我们可以使用动态组件来根据不同的条件显示不同的组件。动态组件的实现方式有很多种，其中一种就是使用 ng-template。

// javascriptcn.com 代码示例
<ng-container *ngComponentOutlet="condition ? component1 : component2; injector: myInjector"></ng-container>

<ng-template #component1Template>
  <app-component1></app-component1>
</ng-template>

<ng-template #component2Template>
  <app-component2></app-component2>
</ng-template>

@Component({
  selector: 'app-root',
  template: `
    <ng-container *ngComponentOutlet="condition ? component1 : component2; injector: myInjector"></ng-container>
  `
})
export class AppComponent {
  condition = true;

  @ViewChild('component1Template') component1Template: TemplateRef<any>;
  @ViewChild('component2Template') component2Template: TemplateRef<any>;

  myInjector: Injector;

  constructor(private injector: Injector) {
    this.myInjector = Injector.create({
      providers: [{
        provide: 'condition',
        useValue: this.condition
      }],
      parent: injector
    });
  }

  ngAfterViewInit() {
    this.myInjector = Injector.create({
      providers: [{
        provide: 'condition',
        useValue: this.condition
      }, {
        provide: 'component1Template',
        useValue: this.component1Template
      }, {
        provide: 'component2Template',
        useValue: this.component2Template
      }],
      parent: injector
    });
  }
}

上面的代码中，我们使用了 ngComponentOutlet 和 ng-template 来实现了一个动态组件。我们先定义了两个模板 component1Template 和 component2Template，然后在 ngComponentOutlet 中根据条件动态引用不同的组件。

总结

ng-template 是 Angular4+ 中非常重要的一个指令，它可以帮助我们实现很多复杂的逻辑和功能。本文介绍了 ng-template 的基本使用教程，包括语法、常见用法和示例代码。希望本文对读者有所帮助，让大家更好地掌握 ng-template 的使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655ad291d2f5e1655d5058d3