文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载结构指令Structural Directives是 Angular 中用于修改 DOM 布局的一类指令它通过添加、移除或操作元素根据特定条件或数据集合动态控制视图结构。本文以 Angular 开发路线图中 structural-directives 文档为核心结合仓库内 directives、control-flow、if、for、switch 等主题文档系统讲解内置结构指令的用法、*语法糖与ng-template的关系、microsyntax微语法原理以及如何编写和测试自定义结构指令。学完本文你将能熟练使用*ngIf、*ngFor、*ngSwitch管理视图结构并掌握用DirectiveTemplateRefViewContainerRef实现自己的结构指令。一、什么是结构指令结构指令是附着在元素上的指令类Directive ClassAngular 通过它为 HTML 元素附加自定义行为。在 Angular 中指令共有三类组件Component带模板的指令结构指令Structural Directive通过添加、删除元素修改布局属性指令Attribute Directive改变现有元素的外观或行为不改变 DOM 结构。这一点在路线图文档 directives 中有明确说明。与属性指令如ngClass、ngStyle直接在所依附元素上操作不同结构指令会整体增删宿主元素及其子树因此通常以星号*前缀书写例如div *ngIfisLoggedIn欢迎回来/div ul li *ngForlet item of items{{ item }}/li /ul常见的两个内置结构指令正是*ngIf按条件渲染添加/移除元素*ngFor基于数组重复渲染元素。它们与*ngSwitch一起构成了 Angular 模板中最基础的视图结构控制能力。二、*ngIf条件渲染*ngIf根据绑定表达式的真假值决定是否将该元素及其内容加入或移出 DOM。注意它和 CSSdisplay: none有本质区别*ngIf为假时元素会被完全移除其内部组件会被销毁状态不保留。Component({ selector: app-user-panel, template: div *ngIfuser用户{{ user.name }}/div div *ngIfisAdmin; else guestView管理员菜单/div ng-template #guestView游客视图/ng-template , }) export class UserPanelComponent { user: User | null null; isAdmin false; }2.1else分支*ngIf支持else语法指向一个ng-template引用div *ngIfisLoading; else loaded加载中…/div ng-template #loaded div数据加载完成/div /ng-templatethen与else还可以同时指定甚至绑定为变量ng-template #loadingTmpl加载中…/ng-template div *ngIfisLoading; then loadingTmpl; else loadedTmpl/div ng-template #loadedTmpl加载完成/ng-template2.2 与if块语法的关系在较新的 Angular 版本中官方推荐用内置控制流块替代部分结构指令条件逻辑写成if/elseif (user) { div用户{{ user.name }}/div } else { div未登录/div }根据仓库 if 文档if块在条件表达式为 truthy 时渲染内容内容同样会随表达式结果从 DOM 中添加或移除路线图 control-flow 文档指出控制流块语法比旧的结构指令更直观、可读性更高是当前模板编写的主流方向。三、*ngFor列表渲染*ngFor遍历数组或可迭代集合为每个元素重复渲染宿主元素ul li *ngForlet item of items; index as i; trackBy: trackById {{ i }}. {{ item.name }} /li /ultrackById(_index: number, item: Item): number { return item.id; }let item of items声明循环变量index as i导出当前索引first/last/even/odd导出的布尔辅助变量常用于分栏或样式区分trackBy指定跟踪函数让 Angular 在数据变化时只更新变化的 DOM 节点而不是重建整个列表是列表性能优化的关键手段。3.1 与for块语法的关系新语法中列表渲染改用for块并强制要求提供track表达式帮助框架在数据变化时高效更新 DOM参见仓库 for 文档for (item of items; track item.id) { li{{ item.name }}/li } empty { li列表为空/li }empty块在集合为空时渲染替代了旧写法中常见的*ngIfitems.length组合。若数据源本身可为空也可以配合if先判断if (items) { for (item of items; track item.id) { li{{ item.name }}/li } }四、*ngSwitch多分支选择*ngSwitch不是单个结构指令而是一组指令的组合包括宿主上的*ngSwitch、*ngSwitchCase和*ngSwitchDefaultdiv [ngSwitch]status p *ngSwitchCasesuccess操作成功/p p *ngSwitchCaseerror操作失败/p p *ngSwitchDefault未知状态/p /div根据仓库 switch 文档switch块使用严格相等将条件表达式与各 case 比较且没有 fallthrough穿透行为无需写break或return。新的块语法写法如下switch (status) { case (success) { p操作成功/p } case (error) { p操作失败/p } default { p未知状态/p } }五、*语法糖与ng-template理解结构指令的关键在于*前缀只是简写语法糖。Angular 编译器会把它展开为ng-template包裹的形式。例如div *ngIfisAdmin管理员面板/div等价于ng-template [ngIf]isAdmin div管理员面板/div /ng-template同理*ngFor展开后是ng-template ngFor [ngForOf]items let-item li{{ item }}/li /ng-templateng-template本身不会渲染任何内容它只是定义一个模板片段由结构指令决定何时、以何种方式将其实例化到视图中。这也是为什么else分支能指向ng-template #guestView—— 它只是一个待实例化的模板引用。5.1 Microsyntax微语法解析*ngForlet item of items; index as i这种紧凑写法被称为microsyntax。编译器会解析字符串let item声明模板变量item对应展开后的let-itemof items绑定到ngForOf输入index as i把导出的index值赋给局部变量i。理解这一点是编写自定义结构指令的基础你定义的指令输入属性Input会与of、in等关键字后的表达式绑定let声明的变量则会在模板上下文context中暴露给宿主内容。六、编写自定义结构指令当内置结构指令无法满足需求例如每渲染 3 个元素后插入分隔符权限不足时替换为占位组件时可以自己实现结构指令。核心依赖两个注入项TemplateRefany指向ng-template代表待渲染的模板内容ViewContainerRef视口容器提供createEmbeddedView()/clear()等 API 来增删视图。import { Directive, Input, TemplateRef, ViewContainerRef } from angular/core; Directive({ selector: [appUnless] }) export class UnlessDirective { private hasView false; constructor( private templateRef: TemplateRefany, private viewContainer: ViewContainerRef, ) {} Input() set appUnless(condition: boolean) { if (!condition !this.hasView) { // 条件为假时渲染模板 this.viewContainer.createEmbeddedView(this.templateRef); this.hasView true; } else if (condition this.hasView) { // 条件为真时移除模板 this.viewContainer.clear(); this.hasView false; } } }使用div *appUnlessisLocked可编辑区域/div展开等价于ng-template [appUnless]isLocked div可编辑区域/div /ng-template可以看到指令类通过Directive装饰器声明参见 custom-directives 文档的说明输入属性的 setter 在绑定值变化时被调用从而驱动创建/清除嵌入视图的操作。若需要在渲染时把宿主元素的数据如循环项暴露给模板内容可使用createEmbeddedView(templateRef, context)传入上下文对象模板内通过 microsyntax 的let-*读取。七、结构指令的测试结构指令的测试与普通指令一致可借助TestBed创建宿主组件再断言 DOM 中元素的存在与否参见仓库 testing-directives 文档。以上面的UnlessDirective为例import { Component } from angular/core; import { TestBed } from angular/core/testing; import { UnlessDirective } from ./unless.directive; Component({ template: div *appUnlesscondition可见内容/div, }) class HostComponent { condition false; } describe(UnlessDirective, () { it(条件为假时渲染内容为真时移除内容, () { const fixture TestBed.configureTestingModule({ declarations: [HostComponent, UnlessDirective], }).createComponent(HostComponent); fixture.detectChanges(); expect(fixture.nativeElement.textContent).toContain(可见内容); fixture.componentInstance.condition true; fixture.detectChanges(); expect(fixture.nativeElement.textContent).not.toContain(可见内容); }); });关键点测试的断言对象是宿主元素而非指令本身因为结构指令的作用正是整体增删 DOM 节点detectChanges()触发变更检测后指令 setter 才会被重新求值。八、结构指令 vs 内置控制流如何选择从仓库 control-flow 文档可见Angular 已提供if、else、for、switch等块式控制流语法它们在功能上覆盖了*ngIf、*ngFor、*ngSwitch的大部分场景且具备更清晰的嵌套可读性、更优的变更检测行为如for强制track。选型建议新代码优先使用块式控制流if/for/switch这也是路线图文档推荐的方向存量项目维护时仍需掌握*ngIf/*ngFor及ng-template展开机制以便读懂旧代码当需要自定义 DOM 增删逻辑权限替换、条件包裹、元素间隔插入等时结构指令仍然是唯一正解——块语法是内置指令的语法糖无法覆盖任意自定义结构行为。九、小结结构指令是 Angular 视图层最核心的机制之一概念要点作用添加 / 移除 / 操作 DOM 元素控制视图结构标识*前缀microsyntax 语法糖内置指令*ngIf条件渲染、*ngFor列表渲染、*ngSwitch多分支底层实现TemplateRefViewContainerRef展开为ng-template新语法if/for/switch内置控制流块扩展方式Directive自定义结构指令 宿主组件测试通过本路线图 structural-directives 主题的深入学习配合 directives指令分类、attribute-directives对比属性指令与 testing-directives测试方法等相关文档你将完整掌握 Angular 中结构控制这一从内置指令到自定义指令的完整技术栈。赞分享文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载相关推荐Angular 属性型指令Attribute Directives完全指南从内置指令到自定义指令实战Angular 属性型指令Attribute Directives完全指南从内置指令到自定义指令实战 属性型指令Attribute Directives文档教程知识库深入理解 Angular 自定义指令Custom Directives从装饰器到 DOM 交互的完整指南深入理解 Angular 自定义指令Custom Directives从装饰器到 DOM 交互的完整指南 导读 自定义指令Custom Directiv文档教程知识库Apollo Server 中的 GraphQL 指令Directives类型系统、可执行指令与自定义指令实战指南Apollo Server 中的 GraphQL 指令Directives类型系统、可执行指令与自定义指令实战指南 导读 本文围绕 Apollo Serv后端API设计上一篇旧书翻新0到1实战用Scan Tailor把歪斜的扫描页批量修成整洁电子书下一篇终极解决方案如何彻底重置Cursor免费试用并突破使用限制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载结构指令Structural Directives是 Angular 中用于修改 DOM 布局的一类指令它通过添加、移除或操作元素根据特定条件或数据集合动态控制视图结构。本文以 Angular 开发路线图中 structural-directives 文档为核心结合仓库内 directives、control-flow、if、for、switch 等主题文档系统讲解内置结构指令的用法、*语法糖与ng-template的关系、microsyntax微语法原理以及如何编写和测试自定义结构指令。学完本文你将能熟练使用*ngIf、*ngFor、*ngSwitch管理视图结构并掌握用DirectiveTemplateRefViewContainerRef实现自己的结构指令。一、什么是结构指令结构指令是附着在元素上的指令类Directive ClassAngular 通过它为 HTML 元素附加自定义行为。在 Angular 中指令共有三类组件Component带模板的指令结构指令Structural Directive通过添加、删除元素修改布局属性指令Attribute Directive改变现有元素的外观或行为不改变 DOM 结构。这一点在路线图文档 directives 中有明确说明。与属性指令如ngClass、ngStyle直接在所依附元素上操作不同结构指令会整体增删宿主元素及其子树因此通常以星号*前缀书写例如div *ngIfisLoggedIn欢迎回来/div ul li *ngForlet item of items{{ item }}/li /ul常见的两个内置结构指令正是*ngIf按条件渲染添加/移除元素*ngFor基于数组重复渲染元素。它们与*ngSwitch一起构成了 Angular 模板中最基础的视图结构控制能力。二、*ngIf条件渲染*ngIf根据绑定表达式的真假值决定是否将该元素及其内容加入或移出 DOM。注意它和 CSSdisplay: none有本质区别*ngIf为假时元素会被完全移除其内部组件会被销毁状态不保留。Component({ selector: app-user-panel, template: div *ngIfuser用户{{ user.name }}/div div *ngIfisAdmin; else guestView管理员菜单/div ng-template #guestView游客视图/ng-template , }) export class UserPanelComponent { user: User | null null; isAdmin false; }2.1else分支*ngIf支持else语法指向一个ng-template引用div *ngIfisLoading; else loaded加载中…/div ng-template #loaded div数据加载完成/div /ng-templatethen与else还可以同时指定甚至绑定为变量ng-template #loadingTmpl加载中…/ng-template div *ngIfisLoading; then loadingTmpl; else loadedTmpl/div ng-template #loadedTmpl加载完成/ng-template2.2 与if块语法的关系在较新的 Angular 版本中官方推荐用内置控制流块替代部分结构指令条件逻辑写成if/elseif (user) { div用户{{ user.name }}/div } else { div未登录/div }根据仓库 if 文档if块在条件表达式为 truthy 时渲染内容内容同样会随表达式结果从 DOM 中添加或移除路线图 control-flow 文档指出控制流块语法比旧的结构指令更直观、可读性更高是当前模板编写的主流方向。三、*ngFor列表渲染*ngFor遍历数组或可迭代集合为每个元素重复渲染宿主元素ul li *ngForlet item of items; index as i; trackBy: trackById {{ i }}. {{ item.name }} /li /ultrackById(_index: number, item: Item): number { return item.id; }let item of items声明循环变量index as i导出当前索引first/last/even/odd导出的布尔辅助变量常用于分栏或样式区分trackBy指定跟踪函数让 Angular 在数据变化时只更新变化的 DOM 节点而不是重建整个列表是列表性能优化的关键手段。3.1 与for块语法的关系新语法中列表渲染改用for块并强制要求提供track表达式帮助框架在数据变化时高效更新 DOM参见仓库 for 文档for (item of items; track item.id) { li{{ item.name }}/li } empty { li列表为空/li }empty块在集合为空时渲染替代了旧写法中常见的*ngIfitems.length组合。若数据源本身可为空也可以配合if先判断if (items) { for (item of items; track item.id) { li{{ item.name }}/li } }四、*ngSwitch多分支选择*ngSwitch不是单个结构指令而是一组指令的组合包括宿主上的*ngSwitch、*ngSwitchCase和*ngSwitchDefaultdiv [ngSwitch]status p *ngSwitchCasesuccess操作成功/p p *ngSwitchCaseerror操作失败/p p *ngSwitchDefault未知状态/p /div根据仓库 switch 文档switch块使用严格相等将条件表达式与各 case 比较且没有 fallthrough穿透行为无需写break或return。新的块语法写法如下switch (status) { case (success) { p操作成功/p } case (error) { p操作失败/p } default { p未知状态/p } }五、*语法糖与ng-template理解结构指令的关键在于*前缀只是简写语法糖。Angular 编译器会把它展开为ng-template包裹的形式。例如div *ngIfisAdmin管理员面板/div等价于ng-template [ngIf]isAdmin div管理员面板/div /ng-template同理*ngFor展开后是ng-template ngFor [ngForOf]items let-item li{{ item }}/li /ng-templateng-template本身不会渲染任何内容它只是定义一个模板片段由结构指令决定何时、以何种方式将其实例化到视图中。这也是为什么else分支能指向ng-template #guestView—— 它只是一个待实例化的模板引用。5.1 Microsyntax微语法解析*ngForlet item of items; index as i这种紧凑写法被称为microsyntax。编译器会解析字符串let item声明模板变量item对应展开后的let-itemof items绑定到ngForOf输入index as i把导出的index值赋给局部变量i。理解这一点是编写自定义结构指令的基础你定义的指令输入属性Input会与of、in等关键字后的表达式绑定let声明的变量则会在模板上下文context中暴露给宿主内容。六、编写自定义结构指令当内置结构指令无法满足需求例如每渲染 3 个元素后插入分隔符权限不足时替换为占位组件时可以自己实现结构指令。核心依赖两个注入项TemplateRefany指向ng-template代表待渲染的模板内容ViewContainerRef视口容器提供createEmbeddedView()/clear()等 API 来增删视图。import { Directive, Input, TemplateRef, ViewContainerRef } from angular/core; Directive({ selector: [appUnless] }) export class UnlessDirective { private hasView false; constructor( private templateRef: TemplateRefany, private viewContainer: ViewContainerRef, ) {} Input() set appUnless(condition: boolean) { if (!condition !this.hasView) { // 条件为假时渲染模板 this.viewContainer.createEmbeddedView(this.templateRef); this.hasView true; } else if (condition this.hasView) { // 条件为真时移除模板 this.viewContainer.clear(); this.hasView false; } } }使用div *appUnlessisLocked可编辑区域/div展开等价于ng-template [appUnless]isLocked div可编辑区域/div /ng-template可以看到指令类通过Directive装饰器声明参见 custom-directives 文档的说明输入属性的 setter 在绑定值变化时被调用从而驱动创建/清除嵌入视图的操作。若需要在渲染时把宿主元素的数据如循环项暴露给模板内容可使用createEmbeddedView(templateRef, context)传入上下文对象模板内通过 microsyntax 的let-*读取。七、结构指令的测试结构指令的测试与普通指令一致可借助TestBed创建宿主组件再断言 DOM 中元素的存在与否参见仓库 testing-directives 文档。以上面的UnlessDirective为例import { Component } from angular/core; import { TestBed } from angular/core/testing; import { UnlessDirective } from ./unless.directive; Component({ template: div *appUnlesscondition可见内容/div, }) class HostComponent { condition false; } describe(UnlessDirective, () { it(条件为假时渲染内容为真时移除内容, () { const fixture TestBed.configureTestingModule({ declarations: [HostComponent, UnlessDirective], }).createComponent(HostComponent); fixture.detectChanges(); expect(fixture.nativeElement.textContent).toContain(可见内容); fixture.componentInstance.condition true; fixture.detectChanges(); expect(fixture.nativeElement.textContent).not.toContain(可见内容); }); });关键点测试的断言对象是宿主元素而非指令本身因为结构指令的作用正是整体增删 DOM 节点detectChanges()触发变更检测后指令 setter 才会被重新求值。八、结构指令 vs 内置控制流如何选择从仓库 control-flow 文档可见Angular 已提供if、else、for、switch等块式控制流语法它们在功能上覆盖了*ngIf、*ngFor、*ngSwitch的大部分场景且具备更清晰的嵌套可读性、更优的变更检测行为如for强制track。选型建议新代码优先使用块式控制流if/for/switch这也是路线图文档推荐的方向存量项目维护时仍需掌握*ngIf/*ngFor及ng-template展开机制以便读懂旧代码当需要自定义 DOM 增删逻辑权限替换、条件包裹、元素间隔插入等时结构指令仍然是唯一正解——块语法是内置指令的语法糖无法覆盖任意自定义结构行为。九、小结结构指令是 Angular 视图层最核心的机制之一概念要点作用添加 / 移除 / 操作 DOM 元素控制视图结构标识*前缀microsyntax 语法糖内置指令*ngIf条件渲染、*ngFor列表渲染、*ngSwitch多分支底层实现TemplateRefViewContainerRef展开为ng-template新语法if/for/switch内置控制流块扩展方式Directive自定义结构指令 宿主组件测试通过本路线图 structural-directives 主题的深入学习配合 directives指令分类、attribute-directives对比属性指令与 testing-directives测试方法等相关文档你将完整掌握 Angular 中结构控制这一从内置指令到自定义指令的完整技术栈。赞分享文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载相关推荐Angular 属性型指令Attribute Directives完全指南从内置指令到自定义指令实战Angular 属性型指令Attribute Directives完全指南从内置指令到自定义指令实战 属性型指令Attribute Directives文档教程知识库深入理解 Angular 自定义指令Custom Directives从装饰器到 DOM 交互的完整指南深入理解 Angular 自定义指令Custom Directives从装饰器到 DOM 交互的完整指南 导读 自定义指令Custom Directiv文档教程知识库Apollo Server 中的 GraphQL 指令Directives类型系统、可执行指令与自定义指令实战指南Apollo Server 中的 GraphQL 指令Directives类型系统、可执行指令与自定义指令实战指南 导读 本文围绕 Apollo Serv后端API设计上一篇旧书翻新0到1实战用Scan Tailor把歪斜的扫描页批量修成整洁电子书下一篇终极解决方案如何彻底重置Cursor免费试用并突破使用限制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
