Angular API 使用手册：ng-template 指令详解-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，ng-template 指令是一个非常有用的指令，它可以帮助我们创建可重用的模板，以便在应用程序中的多个地方使用。在本文中，我们将深入探讨 ng-template 指令的详细用法和应用场景。

ng-template 指令的基本语法

ng-template 指令的基本语法如下：

<ng-template [ngIf]="condition">
  <!-- template content -->
</ng-template>

在上面的语法中，ngIf 是 Angular 内置的一个指令，它用于根据条件动态显示或隐藏元素。当条件为真时，ng-template 指令将渲染模板内容。

ng-template 指令的应用场景

ng-template 指令可以在多种场景下使用，以下是一些常见的应用场景：

1. 显示/隐藏组件

ng-template 指令可以与 ngIf 指令一起使用，以根据条件动态显示或隐藏组件。例如：

<ng-template [ngIf]="showComponent">
  <app-my-component></app-my-component>
</ng-template>

在上面的代码中，如果 showComponent 为真，就会显示 MyComponent 组件，否则就不会显示。

2. 重用模板

ng-template 指令还可以用于创建可重用的模板，以便在应用程序的多个地方使用。例如：

<ng-template #myTemplate>
  <h1>{{title}}</h1>
  <p>{{content}}</p>
</ng-template>

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

在上面的代码中，我们定义了一个名为 myTemplate 的模板，它包含一个标题和一个内容。然后，我们可以使用 ngTemplateOutlet 指令在应用程序的多个地方重用该模板。

3. 自定义指令

ng-template 指令还可以用于创建自定义指令，以便在应用程序中复用某些行为。例如：

// www.javascriptcn.com code example
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
  @Input() set appMyDirective(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }
}

在上面的代码中，我们定义了一个名为 MyDirectiveDirective 的指令，它接受一个名为 appMyDirective 的输入属性。当输入属性的值为真时，该指令将渲染模板内容，否则将清除视图容器。

ng-template 指令的高级用法

ng-template 指令还有一些高级用法，以下是一些常见的用法：

1. TemplateRef

TemplateRef 是一个 Angular 中的重要概念，它表示一个模板的引用。我们可以使用 TemplateRef 类型的变量来引用一个模板。例如：

// www.javascriptcn.com code example
import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <ng-template #myTemplate>
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </ng-template>
  `
})
export class MyComponent {
  @ViewChild('myTemplate') myTemplate: TemplateRef<any>;

  title = 'Hello';
  content = 'World';
}

在上面的代码中，我们定义了一个名为 myTemplate 的模板，并使用 ViewChild 装饰器将其引用保存在 myTemplate 变量中。

2. ViewContainerRef

ViewContainerRef 是另一个重要的 Angular 概念，它表示一个视图容器。我们可以使用 ViewContainerRef 类型的变量来引用一个视图容器。例如：

// www.javascriptcn.com code example
import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <ng-template #myTemplate>
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </ng-template>

    <ng-container #myContainer></ng-container>
  `
})
export class MyComponent {
  @ViewChild('myTemplate') myTemplate: TemplateRef<any>;
  @ViewChild('myContainer', { read: ViewContainerRef }) myContainer: ViewContainerRef;

  title = 'Hello';
  content = 'World';

  ngAfterViewInit() {
    this.myContainer.createEmbeddedView(this.myTemplate);
  }
}

在上面的代码中，我们定义了一个名为 myContainer 的视图容器，并使用 ViewChild 装饰器将其引用保存在 myContainer 变量中。然后，在 ngAfterViewInit 生命周期钩子中，我们使用 myContainer 变量将 myTemplate 模板渲染到视图容器中。

示例代码

最后，让我们来看一下完整的示例代码：

// www.javascriptcn.com code example
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-template #myTemplate let-title let-content="content">
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </ng-template>

    <ng-container *ngTemplateOutlet="myTemplate; context: { $implicit: 'Hello', content: 'World' }"></ng-container>
    <ng-container *ngTemplateOutlet="myTemplate; context: { $implicit: 'Bonjour', content: 'le monde' }"></ng-container>
    <ng-container *ngTemplateOutlet="myTemplate; context: { $implicit: 'Hola', content: 'mundo' }"></ng-container>
  `
})
export class AppComponent { }

在上面的代码中，我们定义了一个名为 myTemplate 的模板，并使用 ngTemplateOutlet 指令在应用程序的多个地方重用该模板。每个 ngTemplateOutlet 都使用一个上下文对象来传递模板的参数。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d250fea941bf7134462253

Angular API 使用手册：ng-template 指令详解