ng-指令

在 Angular 中最常用的指令分为两种，它们分别是 属性型指令 和 结构型指令。

NgClass

• 作用：添加或移除一组 CSS 类

NgStyle

• 作用：添加或移除一组 CSS 样式

NgModel

• 作用：双向绑定到 HTML 表单元素

NgIf

• 作用：根据条件添加或移除 DOM
• 语法：

看不见我

我们也可以通过类绑定或样式绑定来显示或隐藏一个元素。

Show with class
Hide with class

Show with style
Hide with style

NgSwitch

• 作用：类似于 JavaScript 中的 switch 语句，根据条件渲染多个选项中的一个。
• 语法：该指令包括三个相互协作的指令：NgSwitch、NgSwitchCase、NgSwitchDefault

NgFor

• 作用：列表渲染
• 语法：

{{hero.name}}

带索引的 *ngFor

  
{{ item.title + i }}

自定义指令

参考文档：

• 属性型指令：https://angular.io/guide/attribute-directives
• 结构型指令：https://angular.io/guide/structural-directives