Angular自定义结构指令深度解析：<ng-template>与ngTemplateOutlet

本文主要探讨了Angular框架中如何自定义结构指令，通过示例详细解释了两种实现方式：使用`<ng-template>`元素和`ngTemplateOutlet`指令。 在Angular中，自定义结构指令用于控制元素或内容的渲染。结构指令会改变DOM的结构，比如`*ngIf`和`*ngFor`就是常见的结构指令。本文重点介绍了两种创建自定义结构指令的方法。 1. `<ng-template>`元素 `<ng-template>`元素在Angular中用来包裹动态内容，它本身不参与渲染，只有当被引用或嵌入到其他地方时，其内部的内容才会被呈现。在组件中，可以使用`@ViewChild`装饰器与`TemplateRef`一起获取模板元素的引用，然后通过`ViewContainerRef`的`createEmbeddedView`方法来创建并插入内嵌视图。以下是一个例子： ```typescript import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <ng-template #tpl> Big Keriy! </ng-template> `, }) export class Code404Component implements AfterViewInit { @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() { this.vcRef.createEmbeddedView(this.tplRef); } } ``` 在这个例子中，`ng-template`内的"Big Keriy!"将在`ngAfterViewInit`生命周期钩子中被插入到视图中。 2. `ngTemplateOutlet`指令 `ngTemplateOutlet`指令类似于路由器的`routerOutlet`，它用于动态地插入由`ng-template`定义的模板内容。通过将`ngTemplateOutlet`指令绑定到一个模板引用变量，可以在运行时决定显示哪个模板。例如： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <ng-template #stpl> Hello, Semlinker! </ng-template> <ng-template #atpl> Big Keriy! </ng-template> <div [ngTemplateOutlet]="atpl"></div> <div [ngTemplateOutlet]="stpl"></div> `, }) export class Code404Component {} ``` 在这个例子中，有两个模板`stpl`和`atpl`，它们分别被`ngTemplateOutlet`指令引用，因此最终的视图会显示“Big Keriy!”和“Hello, Semlinker!”两条内容。 总结来说，自定义结构指令是Angular中增强应用功能和动态渲染内容的重要手段。`<ng-template>`元素提供了一个容器来存储模板，而`ngTemplateOutlet`则负责在运行时根据需要插入这些模板，使得动态视图的构建变得更加灵活。开发者可以根据需求结合`@ViewChild`、`TemplateRef`、`ViewContainerRef`以及`ngTemplateOutlet`等工具，创建出复杂的自定义结构指令来满足项目需求。