如何快速入门VUE3.0：进入学习
【资料图】
在 Angular中，有两种类型的指令。属性指令修改 DOM元素的外观或者行为。结构指令添加或者移除 DOM元素。
结构指令是 Angular中最强大的特性之一，然而它们却频繁被误解。
如果你对学习 结构指令感兴趣，那么现在我们就来接着阅读，并了解它们是什么，它们有什么用以及如何在项目中使用它们。【相关教程推荐：《angular教程》】
你将学到什么
在本文中，你将学到关于 Angular结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。
学完本文，你将更好理解这些指令并在实际项目中使用它们。
Angular 结构指令是什么？
Angular结构指令是能够更改 DOM结构的指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 *符号。
在 Angular中，有三种标准的结构化指令。
*ngIf- 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）*ngFor- 遍历数组*ngSwitch- 渲染每个匹配的是图下面?是一个结构化指令的例子。语法长这样：
条件语句必须是 true或者 false。
{{worker.name}}
要使用结构指令，我们需要在 我们添加些简单的 我们根据条件来使用 当表达式是 完整的 Good morning to you,click the button to view Today is Monday and this is a dummy text element to make you feel better Understanding the ngIf directive with the else clause 我们使用 我们的组件 我们使用 cups Vegetables Trousers My Shopping 在 我们有一个 当条件值是 如果你想在 最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。 结构指令是 希望通过本文，读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 更多编程相关知识，请访问：编程视频！！ 以上就是Angular中什么是结构指令？怎么使用？的详细内容，更多请关注php中文网其它相关文章！Angular生成一个 *ngIf指令。这会将其转换为方括号 []中的属性绑定，比如 [ngIf]。Angular 结构指令是怎么工作的？
HTML模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。结构指令的例子
HTML代码。app.component.html文件内容如下： Welcome
怎么使用
*ngIf指令*ngIf来确定展示或者移除一个元素。ngIf跟 if-else很类似。false的时候，*ngIf指令移除 HTML元素。当为 true时候，元素的副本会添加到 DOM中。*ngIf代码如下：
Hello
怎么使用
*ngFor指令*ngFor指令来遍历数组。比如：
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语句。比如：typescript中：Myshopping: string = "";
MyShopping变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。true的时候，相关的元素就会被渲染到 DOM中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault的元素到 DOM中。Angular 中我们什么时候需要用结构指令呢？
DOM中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSS样式，或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。总结
Angular中很重要的一部分，我们可以通过多种方式使用它们。
