本篇文章带大家了解一下angular 中结构指令模式，介绍一下结构指令是什么且怎么使用，希望对大家有所帮助！
在 angular 中，有两种类型的指令。属性指令修改 dom 元素的外观或者行为。结构指令添加或者移除 dom 元素。
结构指令是 angular 中最强大的特性之一，然而它们却频繁被误解。
如果你对学习 结构指令 感兴趣，那么现在我们就来接着阅读，并了解它们是什么，它们有什么用以及如何在项目中使用它们。【相关教程推荐：《angular教程》】
你将学到什么在本文中，你将学到关于 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">  <h1>    welcome   </h1></div><h2> <app-illustrations></app-illustrations></h2>
怎么使用 *ngif 指令我们根据条件来使用 *ngif 来确定展示或者移除一个元素。ngif 跟 if-else 很类似。
当表达式是 false 的时候，*ngif 指令移除 html 元素。当为 true 时候，元素的副本会添加到 dom 中。
完整的*ngif 代码如下：
<h1> <button (click)="toggleon =!toggleon">ng-if illustration</button>  </h1>  <div *ngif="!toggleon">  <h2>hello </h2>  <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 的时候，那么是时候使用结构指令了。
总结结构指令是 angular 中很重要的一部分，我们可以通过多种方式使用它们。
希望通过本文，读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。
本文为译文，采用意译的形式。
原文地址：https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/
更多编程相关知识，请访问：编程视频！！
以上就是angular中什么是结构指令？怎么使用？的详细内容。