Angular的结构指令如何使用

这篇文章主要介绍“Angular的结构指令如何使用”，在日常操作中，相信很多人在Angular的结构指令如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular的结构指令如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

在

Angular

中，有两种类型的指令。属性指令修改

DOM

元素的外观或者行为。结构指令添加或者移除

DOM

元素。

结构指令是

Angular

中最强大的特性之一，然而它们却频繁被误解。

Angular 结构指令是什么？

Angular

结构指令是能够更改

DOM

结构的指令。这些指令可以

添加、移除或者替换元素

。结构指令在其名字之前都有

*

符号。

在

Angular

中，有三种标准的结构化指令。

• *ngIf

  - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）

• *ngFor

  - 遍历数组

• *ngSwitch

  - 渲染每个匹配的是图

下面?是一个结构化指令的例子。语法长这样：

 <element ng-if="Condition"></element>

条件语句必须是

true

或者

false

。

<div *ngIf="worker" class="name">{{worker.name}}</div>

Angular

生成一个

<ng-template>

的元素，然后应用

*ngIf

指令。这会将其转换为方括号

[]

中的属性绑定，比如

[ngIf]

。

<div>

的其余部分，包含类名，插入到

<ng-template>

里。比如：

<ng-template [ngIf]="worker">
  <div class="name">{{worker.name}}</div>
</ng-template>

Angular 结构指令是怎么工作的？

要使用结构指令，我们需要在

HTML

模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。

结构指令的例子

我们添加些简单的

HTML

代码。

app.component.html

文件内容如下：

<div style="text-align:center">
  <h2>
    Welcome 
  </h2>
</div>
<h3> <app-illustrations></app-illustrations></h3>

怎么使用

*ngIf

指令

我们根据条件来使用

*ngIf

来确定展示或者移除一个元素。

ngIf

跟

if-else

很类似。

当表达式是

false

的时候，

*ngIf

指令移除

HTML

元素。当为

true

时候，元素的副本会添加到

DOM

中。

完整的

*ngIf

代码如下：

<h2>
	<button (click)="toggleOn =!toggleOn">ng-if illustration</button>
  </h2>
  <div *ngIf="!toggleOn">
  <h3>Hello </h3>
  <p>Good morning to you,click the button to view</p>
  </div>
  <hr>
  <p>Today is Monday and this is a dummy text element to make you feel better</p>
  <p>Understanding the ngIf directive with the else clause</p>

怎么使用

*ngFor

指令

我们使用

*ngFor

指令来遍历数组。比如：

<ul>

    <li *ngFor="let wok of workers">{{ wok }}</li>

</ul>

我们的组件

TypeScript

文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-illustrations',
  templateUrl: './illustrations.component.html',
  styleUrls: ['./illustrations.component.css']
})
export class IllustrationsComponent implements OnInit {
  workers: any = [

    'worker 1',

    'worker 2',

    'worker 3',

    'worker 4',

    'worker 5',

  ]

  constructor() { }

  ngOnInit(): void {
  }

}

怎么使用

*ngSwitch

指令

译者加：这个指令实际开发很有用

我们使用

ngSwitch

来根据不同条件声明来决定渲染哪个元素。

*ngSwitch

指令很像我们使用的

switch

语句。比如：

<div [ngSwitch]="Myshopping">
  <p *ngSwitchCase="'cups'">cups</p>
  <p *ngSwitchCase="'veg'">Vegetables</p>
  <p *ngSwitchCase="'clothes'">Trousers</p>
  <p *ngSwitchDefault>My Shopping</p>
</div>

在

typescript

中：

Myshopping: string = '';

我们有一个

MyShopping

变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。

当条件值是

true

的时候，相关的元素就会被渲染到

DOM

中，其余的元素将被忽略。如果没有元素匹配，则渲染

*ngSwitchDefault

的元素到

DOM

中。

Angular 中我们什么时候需要用结构指令呢？

如果你想在

DOM

中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素

CSS

样式，或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。

最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。