Angular的结构指令如何使用

这篇文章主要介绍“Angular的结构指令如何使用”，在日常操作中，相信很多人在Angular的结构指令如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular的结构指令如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！在 Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。结构指令是 Angular 中最强大的特性之一，然而它们却频繁被误解。Angular 结构指令是能够更改 DOM 结构的指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 * 符号。在 Angular 中，有三种标准的结构化指令。*ngIf – 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）*ngFor – 遍历数组*ngSwitch – 渲染每个匹配的是图下面?是一个结构化指令的例子。语法长这样：条件语句必须是 true 或者 false。Angular 生成一个的元素，然后应用 *ngIf 指令。这会将其转换为方括号 [] 中的属性绑定，比如 [ngIf]。


 的其余部分，包含类名，插入到  里。比如：

{{worker.name}}

Angular 结构指令是怎么工作的？
要使用结构指令，我们需要在 HTML 模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。
结构指令的例子
我们添加些简单的 HTML 代码。
app.component.html 文件内容如下：


Welcome




怎么使用 *ngIf 指令
我们根据条件来使用 *ngIf 来确定展示或者移除一个元素。ngIf 跟 if-else 很类似。
当表达式是 false 的时候，*ngIf 指令移除 HTML 元素。当为 true 时候，元素的副本会添加到 DOM 中。
完整的*ngIf 代码如下：

	


Hello
Goodmorningtoyou,clickthebuttontoview


TodayisMondayandthisisadummytextelementtomakeyoufeelbetter
UnderstandingthengIfdirectivewiththeelseclause
怎么使用 *ngFor 指令
我们使用 *ngFor 指令来遍历数组。比如：


{{wok}}

我们的组件 TypeScript 文件：
import{Component,OnInit}from'@angular/core';

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

'worker1',

'worker2',

'worker3',

'worker4',

'worker5',

]

constructor(){}

ngOnInit():void{
}

}
怎么使用 *ngSwitch 指令

译者加：这个指令实际开发很有用
我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。*ngSwitch 指令很像我们使用的 switch 语句。比如：

cups
Vegetables
Trousers
MyShopping

在 typescript 中：
Myshopping:string='';
我们有一个 MyShopping 变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。
当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。
Angular 中我们什么时候需要用结构指令呢？
如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSS 样式，或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。
最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。
到此，关于“Angular的结构指令如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！


推荐阅读：


                                Angular 2 属性指令 vs 结构指令
                            

                                Angular-指令是什么
                            




免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
                                                    angular                                            





上一篇新闻：
Node.js可运用的测试框架有哪些


下一篇新闻：
web前端的三大技术是哪几个





猜你喜欢



Node+mysql怎么实现SQL注入
React Hook中useEffecfa函数如何使用
JavaScript中的声明提升是什么
JavaScript怎么实现分支优化
Node.js中的npm与包怎么使用
es6原型链是什么及怎么实现
                                                 免费云主机域名   
javascript中小于等于如何表示
es6中map和object的区别有哪些
javascript如何求13阶乘
JavaScript如何判断URL是否合法及全排列

要使用结构指令，我们需要在 HTML 模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。我们添加些简单的 HTML 代码。app.component.html 文件内容如下：我们根据条件来使用 *ngIf 来确定展示或者移除一个元素。ngIf 跟 if-else 很类似。当表达式是 false 的时候，*ngIf 指令移除 HTML 元素。当为 true 时候，元素的副本会添加到 DOM 中。完整的*ngIf 代码如下：Goodmorningtoyou,clickthebuttontoviewTodayisMondayandthisisadummytextelementtomakeyoufeelbetterUnderstandingthengIfdirectivewiththeelseclause我们使用 *ngFor 指令来遍历数组。比如：我们的组件 TypeScript 文件：译者加：这个指令实际开发很有用我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。*ngSwitch 指令很像我们使用的 switch 语句。比如：cupsVegetablesTrousersMyShopping在 typescript 中：我们有一个 MyShopping 变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。当然，我们还可以使用它们来更改元素 CSS 样式，或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。到此，关于“Angular的结构指令如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。