网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线：028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

建站知识

当前位置：首页 > 建站知识

Angular的结构指令如何使用

这篇文章主要介绍“Angular的结构指令如何使用”，在日常操作中，相信很多人在Angular的结构指令如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular的结构指令如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

北川羌族网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联自2013年创立以来到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

Angular的结构指令如何使用

在 Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。

结构指令是 Angular 中最强大的特性之一，然而它们却频繁被误解。

Angular 结构指令是什么？

Angular 结构指令是能够更改 DOM 结构的指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 * 符号。

在 Angular 中，有三种标准的结构化指令。

  • *ngIf - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）

  • *ngFor - 遍历数组

  • *ngSwitch - 渲染每个匹配的是图

下面?是一个结构化指令的例子。语法长这样：

 

条件语句必须是 true 或者 false。

{{worker.name}}

Angular 生成一个 的元素，然后应用 *ngIf 指令。这会将其转换为方括号 [] 中的属性绑定，比如 [ngIf]。

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


  {{worker.name}}

Angular 结构指令是怎么工作的？

要使用结构指令，我们需要在 HTML 模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。

结构指令的例子

我们添加些简单的 HTML 代码。

app.component.html 文件内容如下：


  

    Welcome 
  

 

怎么使用 *ngIf 指令

我们根据条件来使用 *ngIf 来确定展示或者移除一个元素。ngIf 跟 if-else 很类似。

当表达式是 false 的时候，*ngIf 指令移除 HTML 元素。当为 true 时候，元素的副本会添加到 DOM 中。

完整的*ngIf 代码如下：


	ng-if illustration
  

  
  
Hello 

  
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

怎么使用 *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 语句。比如：


  cups

  Vegetables

  Trousers

  My Shopping

在 typescript 中：

Myshopping: string = '';

我们有一个 MyShopping 变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。

当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我们什么时候需要用结构指令呢？

如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSS 样式，或者添加事件监听器。甚至可以使用它们来创建一个之前不存在的新的元素。

最好的规则是：当我们正在考虑操作 DOM 的时候，那么是时候使用结构指令了。

到此，关于“Angular的结构指令如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


文章名称：Angular的结构指令如何使用
链接URL：http://bjjierui.cn/article/poghcj.html

其他资讯

Copyright © 2012-2020 网创优客信息咨询 版权所有 蜀ICP备2023009085号-7
手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com
成都网络公司-网创优客建站品牌专注成都网站建设、成都网站设计服务，为成都公司建设高品质的网站