Angular结构指令及用法是什么，怎样工作的？-群英

上一篇：JavaScript内存错误包括几种，怎么理解下一篇：reduce方法的基本使用是怎样，有哪些使用技巧？

这篇文章将为大家详细讲解有关“Angular结构指令及用法是什么，怎样工作的？”的知识，下文有详细的介绍，小编觉得挺实用的，对大家学习或工作或许有帮助，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

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

如果你对学习 结构指令 感兴趣，那么现在我们就来接着阅读，并了解它们是什么，它们有什么用以及如何在项目中使用它们。

你将学到什么

在本文中，你将学到关于 Angular 结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。学完本文，你将更好理解这些指令并在实际项目中使用它们。

Angular 结构指令是什么？

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

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

*ngIf - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）
*ngFor - 遍历数组
*ngSwitch - 渲染每个匹配的是图

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

 
   
  登录后复制

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

   
    {{worker.name}}
   
  登录后复制

Angular 生成一个 <ng-template> 的元素，然后应用 *ngIf 指令。这会将其转换为方括号 [] 中的属性绑定，比如 [ngIf]。<div> 的其余部分，包含类名，插入到 <ng-template> 里。比如：

   
  
    
     {{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 指令来遍历数组。比如：

   
   

    
    
    {{ wok }}


   
   
  登录后复制

我们的组件 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 中很重要的一部分，我们可以通过多种方式使用它们。

希望通过本文，读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。

本文为译文，采用意译的形式。

原文地址：https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/

关于“Angular结构指令及用法是什么，怎样工作的？”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识。

标签： Angular结构指令

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

上一篇：JavaScript内存错误包括几种，怎么理解下一篇：reduce方法的基本使用是怎样，有哪些使用技巧？

你将学到什么

Angular 结构指令是什么？

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

结构指令的例子

Welcome

怎么使用 *ngIf 指令

ng-if illustration

Hello

怎么使用 *ngFor 指令

怎么使用 *ngSwitch 指令

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

总结

**怎么使用 `*ngIf` 指令**

**怎么使用 `*ngFor` 指令**

**怎么使用 `*ngSwitch` 指令**