Angular 内置指令详解

指令是文档对象模型（DOM）中的标记。我们可以将指令与任何控制器或 HTML 标签一起使用，以此告诉编译器预期执行什么操作或行为。虽然系统中存在一些预定义的指令，但如果开发者愿意，我们也可以创建新的指令（即自定义指令）。
基本上，指令分为 3 种类型，每种类型都包含一些内置指令。在本文中，我们将与大家探讨所有这 3 种类型的指令及其内置指令。

目录

• 1. 组件指令
• 2. 属性指令
• 3. 结构指令

1. 组件指令

组件是带有模板的指令。它们是 Angular 应用程序的构建块，封装了应用程序某一部分的 UI（用户界面）和行为。我们可以使用组件来创建可复用且模块化的 UI 元素。它们通常使用 @Component 装饰器来声明，并且一般都有一个对应的 HTML 模板。

语法： 在下面的组件中，我们使用了 @Component 来定义一个组件。

import { Component } from ‘@angular/core‘;

@Component({
    selector: ‘app-root‘,
    templateUrl: ‘./app.component.html‘,
})
export class AppComponent {}

2. 属性指令

属性指令用于通过应用自定义属性来改变 DOM 元素的外观或行为。这些指令作为属性应用在元素上，并用方括号表示。属性指令通常用于动态样式设置、输入验证或 DOM 操作等任务。

内置属性指令：

1. ngClass: NgClass 指令允许我们根据条件有选择地将 CSS 类应用到 HTML 元素上。
语法：

2. ngStyle: NgStyle 指令使我们能够根据条件将内联样式应用到 HTML 元素上。
语法：

3. ngModel: NgModel 指令为表单元素提供双向数据绑定，使模型和视图之间的数据保持同步。
语法：

示例：

HTML


CODEBLOCK_ec5c7400


CSS


CODEBLOCK_0e864458


JavaScript


CODEBLOCK_d4fc9fda


JavaScript


CODEBLOCK_0463bf43

输出：

!builtin1

3. 结构指令

结构指令负责通过根据条件添加、删除或操作元素来操作 DOM 布局。它们在指令名称前带有星号 ()，通常用于根据条件改变 DOM 的结构。常见的例子包括 ngIf、*ngFor 和 ngSwitch。

内置属性指令：

1. ngIf: ngIf 指令根据提供的表达式有条件地包含或移除元素。
语法：

2. ngFor: ngFor 指令遍历一个集合并为集合中的每一项实例化一次模板。
语法：

“`