了解 Angular 中的结构/模板指令和常规指令之间的区别

免费领取国家顶级域名（.cn/.中国）

欢迎加入国家域名信源站点导航

站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

介绍

Angular 因其单页应用程序行为和模型视图控制器方法在前端框架和基于 JavaScript 的库中很受欢迎。

随着 Angular 的每个新版本的发布，团队都添加了各种新功能，但有一个核心功能保持不变，即指令。

Angular 中的指令

Angular 中指令是最广泛使用的功能之一，它是对 DOM 的指令；换句话说，我们可以说指令是一种将类或组件标记为指令的装饰器。

有一些内置指令，我们还可以创建自定义指令来将一些自定义行为附加到不同的元素。

Angular 总共支持三种类型的指令：

组件指令
结构指令
属性指令

这些指令可用于通过应用内联属性和适当的值来改变 DOM 元素的行为或外观。

在本指南中，我们将了解组件指令和结构指令之间的区别。我们将在另一篇指南中介绍属性指令。

在深入探讨差异之前，让我们仔细看看这两个指令，即组件指令和结构指令，以及它们在应用程序中的工作方式。

组件指令

组件指令是最常用的指令之一，在整个应用程序中使用。因此，没有组件指令，任何 Angular 应用程序都不是完整的。

组件指令是一个附加了@Component装饰器的类。我们知道 Angular 应用程序至少应该有一个组件，即根组件。因此，组件指令是每个应用程序中必不可少的。

它用于将模板和样式与组件类一起附加，并为我们提供了一种灵活的方式来定义组件以及模板和样式表。

由于它是一个组件指令，所以其他两种类型的指令，结构指令和行为指令，仅仅是为了修改 DOM 元素的行为。

让我们使用下面的ng命令创建一个 Angular 应用程序。

      Ng new directivesdemo

创建 Angular 应用后，它将默认创建一个名为app 的根组件，并且该文件夹将包含三个不同的文件：

App.component.ts：包含同一组件类的所有业务逻辑以及控制模板行为的各种属性和方法。
App.compoinent.html：这包含完整的 HTML 标记逻辑，这些逻辑将由组件控制。不必将模板源代码指定到单独的文件中；我们也可以直接将模板代码指定到组件中。
App.component.css：包含组件所需的 CSS 样式表，通过 style 属性与组件相连。与 HTML 一样，我们也可以直接在组件中指定样式，而不必在单独的 CSS 文件中指定。

这三个文件是应用程序中任何组件的组成部分。因此，我们可以通过在组件文件本身中指定 CSS 和 HTML 代码来重新设计结构。

现在我们打开组件app.component.ts文件，源代码将如下所示。

      import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {

  name = 'Angular';
  constructor() {
  }

}
    

在此组件文件中，@Component是一个装饰器，它始终附加到类上以添加其行为。组件可以创建三种术语。

选择器：选择器是每个组件的唯一标识符，如果我们想要渲染任何其他组件，那么我们可以使用它们的选择器名称，以便将其作为子组件呈现到父组件中。
TemplateUrl：模板URL用于指定我们可以定义模板代码的文件，并且模板的URL将从组件进行控制。
StyleUrl：样式URL用于指定样式表的文件，我们可以在其中编写可应用于模板的样式，该模板与特定组件相连。

这就是我们通过指定@Component装饰器以及模板和样式 URL 来创建组件的方式。它们都作为一个单元，称为组件。

结构指令

结构指令仅用于操纵 DOM 行为。

更具体地说，我们可以说结构指令用于创建或销毁不同的 DOM 元素，即从 DOM 树中永久添加、修改或删除任何元素。

在使用结构指令之前，我们必须知道并小心，它会从 DOM 中创建或消除元素并频繁更新 DOM，因此在将业务逻辑应用于它们之前我们可能需要三思而后行。

在 Angular 中，结构指令分为三种不同的类型：

ngIf
吴恩达
NgSwitch

这三个元素用于有条件地隐藏元素、将多个元素添加到 DOM 中以及根据条件渲染任何特定元素。

所有结构指令都可以用星号（*）来识别。

让我们学习这三种结构指令的基础知识。

NgIf 指令

ngIf指令是最直接的结构指令，用于有条件地显示或隐藏 DOM 中的任何元素。

当我们可以提供具体情况时，它与 if-else 条件非常相似。如果条件可以满足，则呈现元素，否则，如果条件为假，我们可以呈现任何默认元素。

让我们通过一个简单的例子来看一下NgIf指令以及它的工作原理。

创建组件并打开名为ngifdirective.component.ts的文件并粘贴以下源代码行。

      import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-ng-if-directive",
  templateUrl: "./ng-if-directive.component.html",
  styleUrls: ["./ng-if-directive.component.css"]
})

export class NgIfDirectiveComponent implements OnInit {

  // Boolean variables
  isDivVisible: boolean = true;
  isLabelVisible: boolean = false;
    
  constructor() {}
  ngOnInit() {}

}
    

这里我们有两个不同的布尔变量，isDivVisible和isLabelVisible，以及默认值，这些值将在模板中用于显示或隐藏 DOM 中的任何元素。

下一步是打开文件ngifdirective.component.html并粘贴以下几行源代码。

      <div>
	<span>Ng-if Directive example</span><br/><br/>

	<div *ngIf='isDivVisible'>      
		This DIV is visible using ngIf condition
	</div>

	<label *ngIf='isLabelVisible'>
		This label is hidden based on ngIf condition
	</label>
</div>
    

我们在模板中加入了两个不同的元素，分别是 div 和标签控件，并且除了控件之外，我们还使用了*ngIf指令和变量名。

因此，根据条件，如果答案正确，它将显示该元素。否则，它将从 DOM 中隐藏该元素。

NgFor 指令

ngfor指令用于迭代数组的值，这类似于我们在不同编程语言中使用的 for 循环。

让我们创建一个新组件并打开名为ngfordirective.component.ts的文件并粘贴以下代码行。

      import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ng-for-directive',
  templateUrl: './ng-for-directive.component.html',
  styleUrls: ['./ng-for-directive.component.css']
})

export class NgForDirectiveComponent implements OnInit {

  employees: any = [
    'employee 1',
    'employee 2',
    'employee 3',
    'employee 4',
    'employee 5',
  ]

  constructor() { }
  ngOnInit() {
  }

}
    

这里需要注意的一个变量是employees变量，它是将要迭代到名为ngfordirective.component.html的模板文件中的不同对象的数组。

      <ul>
    <li *ngFor="let emp of employees">{{ emp }}</li>
</ul>
    

我们有一个名为<ul>的元素，在无序列表中，我们需要使用 for 循环来迭代项目数组。

因此，与<li>元素一起，还使用了附加属性*ngFor，它接受数组，并且每个项目都将被呈现，直到到达集合中的最后一个值。

我们还可以将索引与项目一起使用，就像这样。

      <ul>
    <li *ngFor="let emp of employees; let i=index">{{ emp }} {{ i }}</li>
</ul>
    

NgSwitch 指令

ngSwitch指令与 switch case 非常相似，它用于根据单一条件和后面的不同 case 语句来呈现元素。

让我们创建一个新组件并打开文件ngSwitchDirective.component.ts并粘贴以下代码行。

      import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ng-switch-directive',
  templateUrl: './ng-switch-directive.component.html',
  styleUrls: ['./ng-switch-directive.component.css']
})

export class NgSwitchDirectiveComponent implements OnInit {
  age: number = 25;

  constructor() { }

  ngOnInit() {
  }

}
    

我们有一个名为age 的变量以及默认值，这个变量将被用在模板中来呈现满足条件的特定元素。

打开文件ngSwwitchdirective.component.html并粘贴以下代码行。

      <div [ngSwitch]="age">

    <span *ngSwitchCase="55">Your age is > 50</span>
    <span *ngSwitchCase="45">Your age is > 40</span>
    <span *ngSwitchCase="35">Your age is > 30</span>
    <span *ngSwitchCase="25">Your age is > 20</span>
    <span *ngSwitchCase="15">Your age is > 10</span>

</div>
    

父元素<div>包含条件，即年龄，并且根据条件我们使用*ngSwitchCase来处理不同的情况。

一旦条件保持为真，相关元素将被呈现到 DOM 中，其余项目将被忽略。

比较组件型指令和结构型指令

组件指令只是一个附加元素模板和样式以及特定行为的指令。结构指令通过添加、更改或删除不同元素来修改 DOM 元素及其行为。

组件指令使用@Component装饰器并要求组件有单独的视图，而结构指令内置于 Angular 中并且只关注 DOM 元素。

组件指令可以创建多次，也就是说，Angular 中的每个组件都会附加一个@Component装饰器，但我们不能将多个结构指令应用于同一个 HTML 元素。

这就是组件型指令和结构型指令之间的区别。要记住的是，前者用于将类附加到指令，后者用于操作 DOM 元素。

<div class="title aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridColumn aem

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文