ng-template 是 Angular 组件中一个重要的指令，它被用于声明性地定义一段 HTML 代码，以供组件动态生成内容使用。本文将介绍 Angular 12 中如何使用 ng-template 指令，并提供详细的示例代码帮助读者理解和应用。
ng-template 指令介绍
ng-template 指令是 Angular 中一个非常有用的指令，用于定义一段 HTML 代码，以供组件动态生成内容使用。它在组件中的应用非常广泛，比如结合 ngIf、ngFor 等指令一起使用，用来动态生成列表、表格等内容。
ng-template 基本用法
ng-template 的基本用法比较简单，它可以在组件模板文件中以如下的方式声明：
<ng-template #templateRef> <!-- template body --> </ng-template>
其中，#templateRef 是模板引用变量，template body 是模板内容。模板内容可以包含任意的 HTML 标签和 Angular 语法，比如组件、指令、管道等。
在组件中使用 ng-template 时，可以通过 TemplateRef 类获取模板引用变量，以便对模板内容进行渲染。
下面是一个示例代码，介绍了如何在组件中使用 ng-template：
<!-- app.component.html -->
<ng-template #greet>
<p>Hello, {{name}}!</p>
</ng-template>
<button (click)="showGreeting()">Show Greeting</button>
<!-- app.component.ts -->
import { Component, TemplateRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
@ViewChild('greet') greetTemplateRef: TemplateRef<any>;
showGreeting() {
console.log('Hello, Angular!');
}
}在这个示例中，我们定义了一个 ng-template，其中包含一段欢迎语句，通过按钮点击事件来调用 showGreeting 方法，在控制台中输出欢迎语句。
结合 ngIf 使用 ng-template
ngIf 是 Angular 中另一个非常有用的指令，用于根据表达式的真假值条件，控制 DOM 元素是否显示。结合 ng-template 使用，可以动态生成不同的内容。
下面是一个示例代码，介绍了如何在组件中结合 ngIf 使用 ng-template：
<!-- app.component.html -->
<button (click)="showGreeting()">Show Greeting</button>
<ng-container *ngIf="greetTemplateRef; then greet; else noGreet"></ng-container>
<ng-template #greet>
<p>Hello, {{name}}!</p>
</ng-template>
<ng-template #noGreet>
<p>Click the button to show greeting.</p>
</ng-template>
<!-- app.component.ts -->
import { Component, TemplateRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
@ViewChild('greet') greetTemplateRef: TemplateRef<any>;
showGreeting() {
this.greetTemplateRef = this.greetTemplateRef || null;
}
}在这个示例中，我们定义了一个按钮和两个 ng-template，其中 greet 模板用于显示欢迎语句，noGreet 模板用于显示提示信息。在 ng-container 中使用了 *ngIf 指令，判断是否显示 greet 模板，当 greet 模板存在时，显示 greet 模板，否则显示 noGreet 模板。当点击按钮时，通过 showGreeting 方法来改变 greet 模板的状态。
结合 ngFor 使用 ng-template
ngFor 是 Angular 中另一个非常有用的指令，用于遍历数组或对象，生成一组 DOM 元素。结合 ng-template 使用，可以动态生成复杂的列表或表格。
下面是一个示例代码，介绍了如何在组件中结合 ngFor 使用 ng-template：
<!-- app.component.html -->
<ul>
<ng-container *ngFor="let item of list; index as i; trackBy: trackByFn">
<ng-template [ngIf]="isEven(i)" [ngIfElse]="oddItem">
<li>{{item}}</li>
</ng-template>
<ng-template #oddItem>
<li style="background-color: #EEE">{{item}}</li>
</ng-template>
</ng-container>
</ul>
<!-- app.component.ts -->
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
list = ['Apple', 'Banana', 'Orange', 'Kiwi', 'Mango'];
isEven(num: number) {
return num % 2 === 0;
}
trackByFn(index: number, item: any) {
return item;
}
}在这个示例中，我们定义了一个数组 list，包含了 5 个水果名称。通过 *ngFor 指令遍历 list 数组，并使用 ng-template 和 *ngIf 指令判断当前索引是否为偶数，对奇偶数的元素采用不同的样式，动态生成一个带样式的水果列表。
总结
本文介绍了 Angular 12 中如何使用 ng-template 指令，并提供了详细的示例代码。ng-template 指令在 Angular 组件中非常常用，可以结合 ngIf、ngFor 等指令一起使用，用来动态生成列表、表格等内容。希望本文能够帮助读者更好地掌握 ng-template 指令的使用方法，在实际项目中应用得更加灵活、高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af6ca3add4f0e0ff8db1e1