Angular 指令介绍及使用（三）

Angular 指令概述

在 Angular 中，指令是一种机制，用于扩展和修改组件的行为和外观。指令可以由开发者自定义，也可以是 Angular 框架自带的一些内置指令。通过使用指令，我们可以在 HTML 模板中通过属性或元素名来操作组件。

Angular 中的指令主要分为三种类型：

• 组件指令（Component Directives）

组件指令是一种带有模板的指令，它们代表了可重用的 UI 组件。组件指令通过使用 @Component 装饰器来定义，并使用 selector 属性指定了该组件指令在 HTML 模板中的使用方式。
Angular的组件指令主要有组件装饰器 @Component。举例如下：

@Component：

下面是@Component指令的一个例子：

import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-example',  
  template: '<h1>Hello, World!</h1>'  
})  
export class ExampleComponent { }

在这个例子中，@Component装饰器接受一个元数据对象，其中包含了这个组件的一些基本属性。selector属性定义了如何在HTML模板中使用这个组件，这里我们把它定义为app-example。template属性定义了组件的HTML模板，这里我们简单地显示一个标题。

除了这些，@Component装饰器还可以接受很多其它元数据，如styles、providers等，这些都是用来帮助定义和配置Angular组件的。

• 结构型指令（Structural Directives）

结构型指令用于根据条件动态操作元素或元素集合的结构。常见的结构型指令有 *ngIf、*ngFor、*ngSwitch 等。它们通过改变 DOM 结构来控制元素的显示或隐藏、复制或删除等操作。

• 属性型指令（Attribute Directives）

属性型指令用于修改元素的外观或行为，例如修改元素的样式或增加/删除元素的属性。内置的属性型指令包括 ngClass、ngStyle、ngModel 等。

Angular 指令特点

Angular 中的指令具有以下特点：

指令是组件的基础：在 Angular 中，组件本质上是带有模板和一些行为的指令。因此，组件指令是 Angular 中最常用和重要的指令之一。

指令可以扩展和修改现有的组件和 HTML 元素：通过使用指令，我们可以在现有的组件和 HTML 元素上扩展新的行为和功能。例如，我们可以创建一个指令来让某个元素支持拖拽操作。

指令提供了可重用的组件和功能：通过使用指令，我们可以将某些组件或功能封装成可重用的指令，以便在多个项目中重复使用。这样可以提高代码的可维护性和可重用性。

指令可以通过 DOM 操作来实现各种效果：通过使用指令，我们可以在 DOM 中动态地添加、删除或修改元素和属性，从而实现特定的效果。

指令可以与服务和其他指令进行交互：指令可以依赖其他的指令或服务，从而实现更复杂的交互和功能。

指令具有丰富的声明周期：指令有多个生命周期钩子，可以在指令的创建、更新和销毁等不同阶段执行不同的逻辑。这些生命周期钩子提供了更丰富的指令控制和扩展能力。

Angular 常用指令

在Angular框架中，常见的指令类型包括结构型指令和属性型指令。

结构型指令：

ngIf：

根据条件控制元素的显示与隐藏。

<div *ngIf="showElement">显示的内容</div>

ngFor：

迭代一个集合，并为每个元素生成对应的DOM元素。

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

ngSwitch：

根据条件显示不同的元素。

<div [ngSwitch]="condition">
  <div *ngSwitchCase="1">条件1</div>
  <div *ngSwitchCase="2">条件2</div>
  <div *ngSwitchDefault>默认条件</div>
</div>

属性型指令：

ngClass：

根据条件动态添加和移除元素的CSS类。

<div [ngClass]="{'highlight': isHighlighted, 'italic': isItalic}">文本内容</div>

ngStyle：

根据条件动态设置元素的内联样式。

<div [ngStyle]="{'color': textColor, 'font-size.px': fontSize}">文本内容</div>

ngModel：

实现双向数据绑定，将表单控件的值与组件数据进行同步。

<input [(ngModel)]="name" placeholder="姓名">

Angular 指令例子

以下是一个详细的 Angular 指令的代码例子，展示了如何创建一个自定义指令，并与服务进行交互：

创建自定义指令：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Directive({
  selector: '[myCustomDirective]'
})
export class MyCustomDirective implements OnInit {
  @Input() myCustomDirective: string;

  constructor(private elementRef: ElementRef, private myService: MyService) {}

  ngOnInit(): void {
    // 在指令初始化时执行的逻辑
    this.elementRef.nativeElement.style.backgroundColor = 'yellow';
    
    // 使用服务中的方法
    const result = this.myService.doSomething();
    console.log(result);
  }
}

创建一个服务：

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

@Injectable()
export class MyService {
  doSomething(): string {
    return 'Service method called.';
  }
}

在组件中使用指令：

<div myCustomDirective="example"></div>

这个例子中，我们创建了一个名为 myCustomDirective 的自定义指令，它会将匹配的元素的背景色设置为黄色，并在指令的 ngOnInit 生命周期钩子中调用了服务 MyService 的 doSomething 方法，并将结果打印到控制台。

为了使用自定义指令，我们需要将其添加到 Angular 模块的 declarations 数组中，并确保相关的服务也被注入和提供。





刚刚接触Angular，总结理论知识和简单例子，希望能帮助后来学习Angular的人。

大鹏一日同风起 扶摇直上九万里

诸位加油

---

END