Angular 17 新的流程控制

一、简介

本文主要介绍 Angular 17 中的模板语句中的条件语句 @if/@else-if/@else 和 @for - of 以及 @switch 三种不同的流程控制。

整体语法是 @关键字 配合 {}, 语法与原生 JS 语法极为相似。

二、条件渲染 @if-@else

2.1）关键字

• @if
• @else
• @else-if

2.2）示例

<div>
  <button (click)="toggle()">toggle</button>
  @if(cond) {
      <div>This is A</div>
  } @else {
      <div>This is else</div>
  }
</div>

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './about.component.html',
  styleUrl: './about.component.css'
})
export class AboutComponent {
  cond = false;
  toggle() {
    this.cond = !this.cond;
  }
}

本组件中使用 toggle 函数完成模板不同的状态切换。

2.3）之前使用 *ngIf

<div *ngIf="condition; else elseBlock">
  Content to render when the condition is true.
</div>
<ng-template #elseBlock>
   Content to render when the condition is false.
</ng-template>

我们看到 angular 17 中的流程控制 @if - @else 语句不再使用指令的方式， 而采用与常规的 js 语法很像的模板语法。

三、列表渲染

3.1）关键字

• @for - of
• track
• @empty
• $index
• $even
• $odd
• $count
• $first
• $last

3.2）示例

<div>
  @for (item of list; track item.id; let idx = $index, e = $even, o = $odd, c = $count,  f = $first, l = $last) {
  #{{ item.id }} - {{item.name}} - {{idx}} - {{e}} - {{o}} - {{c}} - {{f}} - {{l}}
  } @empty {
  <div>-_-</div>
  }
</div>

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './list.component.html',
  styleUrl: './list.component.css'
})
export class ListComponent {
  list = [
    {id: 0, name: 'Alice'},
    {id: 1, name: 'Bob'},
  ]
}

3.3）之前使用 *ngFor

<ul>
  <li *ngFor="let item of list">
	{{item.id}} {{item.name}}
  </li>
</ul>

@for-of 语法遍历数组更加贴近 JS 原生语法，使用模板化，代替指令化。同时提供了 $开头的常用变量来方便我们的开发。使用 track 字段表示数组中的值与视图关联。类似于 React 中的 key。

四、@switch

4.1）关键字

• @switch
• @case
• @default

4.2）示例

<button (click)="handleState()">handleState</button>

@switch (state) {
  @case (1) {
    <p>Viewing content of first page</p>
  }
  @case (2) {
    <p>Viewing content of second page</p>
  }
  @default {
    <p>No page selected</p>
  }
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-switch',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './switch.component.html',
  styleUrl: './switch.component.css'
})
export class SwitchComponent {
  state = 1

  handleState() {
    this.state++
  }
}

使用 handleState 控制 state 调节swtich 模板需要转变的状态。

4.3）之前使用 *ngSwitch

<div [ngSwitch]="page">
      <p *ngSwitchCase="1">Viewing content of first page</p>
      <p *ngSwitchCase="2">Viewing content of second page</p>
      <p *ngSwitchCase="3">Viewing content of third page</p>
      <p *ngSwitchDefault>No page selected</p>
</div>

五、小结

在Anglar中原本使用指令的方式进行条件渲染，列表渲染，还有 switch 渲染，全部支持了模板新语法。新的语法与 JS 源本身更加的贴近，本身更加容易理解，也不需要多学习，看一个遍就会了。