详解Angular 自定义结构指令

1. <ng>元素 import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` &lt;!-- 这里使用一个模板变量，在组件中使用@ViewChild装饰器获取模板元素--&gt; <ng> Big Keriy ! </ng> `, }) export class Code404C 在Angular框架中，自定义结构指令是扩展框架功能和实现复杂布局的重要手段。它们允许开发者在DOM元素上插入、移除或操作视图。本文将深入探讨如何在Angular中创建和使用自定义结构指令，主要关注`<ng-template>`元素和`ngTemplateOutlet`指令。 `<ng-template>`元素在Angular中被用来定义模板，它本身不会在页面上渲染，只有当它被引用或嵌入到其他地方时，其内容才会显示。在提供的代码示例中，`<ng-template>`用于存储模板内容： ```typescript import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <!-- 使用一个模板变量，在组件中使用@ViewChild装饰器获取模板元素 --> <ng-template #tpl>Big Keriy !</ng-template> `, }) export class Code404Component implements AfterViewInit { // 使用@ViewChild装饰器获取模板元素 @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() { // 使用ViewContainerRef对象的createEmbeddedView方法创建内嵌视图 this.vcRef.createEmbeddedView(this.tplRef); } } ``` 这段代码定义了一个名为`tpl`的模板变量，并在`ngAfterViewInit`生命周期钩子中通过`ViewContainerRef`的`createEmbeddedView`方法将模板插入到视图中，从而在页面上呈现"Big Keriy !"的文本。 接下来，我们讨论`ngTemplateOutlet`指令。这个指令的作用类似于`router-outlet`，它允许在运行时动态插入模板内容。例如： ```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!"。 `ngTemplateOutlet`还可以结合`ngOutletContext`属性，来传递数据到嵌入的模板中。`ngOutletContext`接受一个对象，该对象的属性可以在模板中通过`let-`语法访问。例如： ```typescript import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <!-- messagey映射到下面context中message 再使用插值表达式显示message的值 --> <ng-template #stpl let-message="message"><p>{{message}}</p></ng-template> <!-- messagey映射到下面context中message，let-msg是语法糖，变量名为msg --> <ng-template #atpl let-msg="message"><p>{{msg}}</p></ng-template> <!-- 若不指定变量值，将显示$implicit的值 --> <ng-template #otpl let-msg><p>{{msg}}</p></ng-template> <div [ngTemplateOutlet]="atpl" [ngOutletContext]="context"></div> <div [ngTemplateOutlet]="stpl" [ngOutletContext]="context"></div> <div [ngTemplateOutlet]="otpl" [ngOutletContext]="context"></div> `, }) export class Code404Component implements AfterViewInit { // 定义context对象 context = { message: 'Hello, Angular!' }; // ... } ``` 在这个例子中，每个模板都有一个`let-`声明的局部变量，它们会从`ngOutletContext`提供的上下文中获取对应的值。当`ngTemplateOutlet`与`ngOutletContext`一起使用时，我们可以动态地改变上下文，从而实现数据的动态绑定和渲染。 总结一下，Angular的自定义结构指令为我们提供了强大的视图操作能力。`<ng-template>`元素允许我们定义模板，而`ngTemplateOutlet`指令则使得这些模板能在运行时被动态插入和渲染。结合`ngOutletContext`，我们可以灵活地传递数据到模板，实现更复杂的视图逻辑。这使得Angular应用程序在处理动态内容和组件交互时更加灵活和强大。