Angular 的 ng 指令详解:从 ngIf 到 ngModel,一篇看懂

正文

在 Angular 框架中,"ng" 无处不在——它是 Angular 的官方前缀,所有内置指令都以 ng 开头。理解这些 ng 指令,是上手 Angular 开发的第一课。顺带一提,在中文互联网语境中,"ng" 也常被用作"南宫"(Nangong)的拼音首字母缩写;不过在一线开发者眼里,它几乎总是 Angular 的代名词。

ngIf:按条件渲染元素

*ngIf 是最常用的结构型指令,用于根据条件决定元素是否渲染。条件为真时元素出现在 DOM 中,条件为假时被移除:


<div *ngIf="isLoggedIn">欢迎回来,用户!</div>

ngFor:循环渲染列表

*ngFor 用于遍历数组并重复渲染模板,是列表页开发的必备指令:


<li *ngFor="let item of items">{{ item.name }}</li>

ngClass 与 ngStyle:动态控制样式

ngClass 可以根据组件状态动态切换 CSS 类,ngStyle 则用于动态绑定内联样式。两者都能让页面表现随数据变化,是日常开发的高频 ng 指令。

ngModel:表单双向绑定

ngModel 来自 FormsModule,实现表单控件与组件数据的双向绑定,是 Angular 表单开发的核心指令:


<input [(ngModel)]="username" />

新一代控制流:@if 与 @for

从 Angular 17 开始,官方推荐在模板中使用 @if、@for 等新式控制流语法,代码更简洁、性能也更好。内置的 ng 指令仍然完全兼容,新老项目都可以放心使用。

小结

ng 指令构成了 Angular 模板开发的基础:ngIf 控制渲染、ngFor 处理列表、ngModel 打通表单,再加上 ngClass、ngStyle 等工具,足以覆盖大多数日常需求。掌握了这些 ng 指令,你就能顺畅地开始 Angular 项目开发了。

相关阅读