这篇文章主要介绍“Angular的结构指令如何使用”,在日常操作中,相信很多人在Angular的结构指令如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular的结构指令如何使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
北川羌族网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联自2013年创立以来到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
在 Angular
中,有两种类型的指令。属性指令修改 DOM
元素的外观或者行为。结构指令添加或者移除 DOM
元素。
结构指令是 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的结构指令如何使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!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的结构指令如何使用
文章分享:http://www.cdkjz.cn/article/poghcj.html