angular指令详解,angular组件和指令的区别
本文带你认识Angular中的结构教学模式，并介绍什么是结构教学以及如何使用结构教学。希望对你有帮助！
在Angular中，有两种类型的指令。属性指令修改DOM元素的外观或行为。结构指令添加或删除DOM元素。
结构指令是Angular中最强大的功能之一，但它们经常被误解。
如果你有兴趣学习结构指令，那么现在让我们继续读下去，了解它们是什么，它们的用途是什么，以及如何在项目中使用它们。【相关教程推荐：《angular教程》】
你将学到什么
在本文中，您将了解角结构的指令模式。你会知道它们是什么以及如何使用它们。
学习完这篇文章后，你会对这些说明有更好的理解，并在实际项目中使用它们。
Angular 结构指令是什么？
角度结构指令是可以改变DOM结构的指令。这些指令可以添加、删除或替换元素。指令名称前有一个*号。
在Angular中，有三个标准的结构化指令。
* ngIf-根据表达式返回的布尔值有条件地包含一个模板(即条件渲染模板* ngFor-遍历数组* ngSwitch-渲染每个匹配如下图？是结构化指令的一个例子。语法看起来是这样的：
element-if= condition/element条件语句必须为true或false。
div *ngIf= worker class= name { { worker . name } }/div Angular生成ng-template的元素，然后应用* ngIf指令。这将把它转换成方括号[]中的属性绑定，比如[ngIf]。div的其余部分，包括类名，被插入到ng模板中。例如：
ng模板[ngIf]=工人
div class= name“{ worker . name } }/div
/ng-template
Angular 结构指令是怎么工作的？
要使用结构化指令，我们需要在HTML模板中添加一个带有指令的元素。然后根据我们在指令中设置的条件或表达式添加、删除或替换元素。
结构指令的例子
我们添加一些简单的HTML代码。
app.component.html文件内容如下：
div style=text-align:center
氕
欢迎
/h1
/div
H2-插图/app-插图/H2:
怎么使用 *ngIf 指令
我们使用*ngIf来根据条件决定是显示还是移除一个元素。NgIf非常类似于if-else
当表达式为false时，*ngIf指令删除HTML元素。为true时，元素的副本被添加到DOM中。
完整的*ngIf代码如下：
氕
按钮(点击)=toggleOn=！切换ng-if插图/按钮
/h1
div *ngIf=！“托格伦”
h2你好/h2
p早上好，点击按钮查看/p
/div
整点
p今天是星期一，这是一个虚拟文本元素，让您感觉更好/p
用else子句穿孔ngif指令/p:
怎么使用 *ngFor 指令
我们使用*ngFor指令来遍历数组。例如：
保险商实验所
Li * ngFor= let wok of workers { wok } }/Li
/ul我们的组件类型脚本文件：
从“@angular/core”导入{ Component，on init }；
@组件({
选择器：“应用程序-插图”，
templateUrl:“”。/illustrations.component.html ，
样式URL:[。/illustrations.component.css]
})
导出类IllustrationsComponent实现OnInit {
工人：任何=[
工人1 ，
工人2 ，
工人3 ，
工人4 ，
工人5 ，
]
构造函数(){ }
ngOnInit(): void {
}
}
怎么使用 *ngSwitch 指令
我们使用ngSwitch根据不同的条件声明来决定渲染哪个元素。*ngSwitch指令与我们使用的Switch语句非常相似。例如：
div [ngSwitch]=我的购物
p * ngSwitchCase=cups cups/p
p * ngswitch case=veg蔬菜/p
p *ngSwitchCase=" "衣服" "裤子/p
p * ngSwitchDefaultMy我的购物/p
typescript中的/div:
my shopping:string=“”；我们有一个MyShopping变量，它有一个默认值，用于呈现满足模块中条件的特定元素。
当条件值为true时，相关元素将被呈现到DOM中，其他元素将被忽略。如果没有匹配的元素，那么*ngSwitchDefault的元素将被呈现到DOM中。
Angular 中我们什么时候需要用结构指令呢？
如果要在DOM中添加或删除元素，应使用structure指令。当然，我们也可以用它们来改变元素的CSS样式，或者添加事件监听器。你甚至可以用它们来创造一个以前不存在的新元素。
最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。
总结
结构指令是Angular的重要组成部分，我们可以在很多方面使用它们。
我希望读者能通过这篇文章更好地理解如何使用这些指令以及何时使用这些模式。
有关编程的更多信息，请访问：编程视频！这就是Angular中的结构指令？怎么用？更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。