Angular 学习之路 12 – ngIf

Angular 的指令用于维护 DOM 结构。使用指令,你可以改变 DOM 元素的样式、行为或者布局。Angular 提供了三种指令:

  • 组件指令
  • 结构指令
  • 属性指令

我们前面介绍过的组件,就是一种特殊的指令。如果你去阅读 Angular 的源代码,在 packages/core/src/metadata/directives.ts 中有这么一段足以说明问题:

/**
 * Supplies configuration metadata for an Angular component.
 *
 * @publicApi
 */
export interface Component extends Directive {

结构指令用于改变 DOM 结构,比如增加或移除一些 DOM 元素等。结构指令通常以*开头。

属性指令可以改变一个 DOM 元素的外观或者行为,例如前面介绍过的ngStylengClass

当然,我们也可以自定义指令。

本章我们将介绍一个常用的结构指令ngIf。顾名思义,ngIf会根据一个条件控制元素的存在与否,类似于几乎所有编程语言都会提供的那个if

ngIf语法如下:

<p *ngIf="condition">
  当 condition === true 时才会显示
</p>

ngIf可以被附加在一个 DOM 元素,上面例子中,ngIf添加在<p>标签上。ngIf是一个结构指令,这意味着它可以附加到任何 DOM 元素,divp 以及我们自定义的组件。同所有结构指令一样,ngIf前面也要添加*ngIf绑定一个表达式,这个表达式可以是任何语句,只不过必须返回true或者false,或者是能够转换成truefalsengIf会计算这个表达式,根据表达式的执行结果决定其所在元素是否显示。如果表达式返回true,Angular 会将这个元素插入到 DOM 树;否则,整个元素会从 DOM 树移除。因此我们需要注意ngIf与下面代码的区别:

<p [hidden]="condition">
  当 condition === false 时显示
</p>

这两段代码看起来执行结果类似,都是根据condition的返回值,决定是否显示其所在的p元素。但其实二者差别很大:ngIf不是隐藏元素,而是将整个元素,连同它的子元素,从 DOM 树中移除,这意味着,整个元素所占用的系统资源都会被释放;hidden绑定仅仅是将元素隐藏,并不会将其从 DOM 树中移除。

ngIf同样支持逻辑非运算符:

<p *ngIf="!condition">
  当 condition !== true 时显示
</p>

ngIf支持else语法:

<div *ngIf="condition; else elseBlock">
  当 condition === true 时显示
</div>
 
<ng-template #elseBlock>
  当 condition === false 时显示
</ng-template>

这里,condition后面跟着一个分号;,然后是else关键字。else分支绑定到一个名为elseBlockng-template元素。注意这里的#elseBlock语法,就是前面我们提到的模板引用变量,相当于给一个ng-template元素起了一个名字。ng-template元素代表一段 HTML 片段,可以出现在模板的任何位置,不过一般会紧跟在else语句后面,以便增加代码可读性。这段代码的含义是,当condition返回true时,渲染div的内容,否则,当condition返回false时,渲染ng-template的内容。

当然,除了ngIf...else,Angular 还提供了ngIf...then...else语法:

<div *ngIf="condition; then thenBlock else elseBlock"> 
  这里不会显示
</div>
 
<ng-template #thenBlock>
  当 condition === true 时显示
</ng-template>
 
<ng-template #elseBlock>
  当 condition === false 时显示
</ng-template>

这里,then绑定到名为thenBlockng-template元素,else绑定到名字elseBlockng-template元素。

Leave a Reply