Lassen Sie uns über Direktiven in Angular sprechen

In diesem Artikel werden Ihnen die Anweisungen in Angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Umgebung:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual. Studio Code

1. Zusammenfassung

Direktive war in der Angular 1.0-Ära (damals AngularJS genannt) sehr beliebt, wird heute jedoch nur noch selten verwendet. Es kann einfach verstanden werden, dass Anweisungen (Anweisungen) verwendet werden, um vorhandene Elemente (DOM) zu erweitern. [Verwandte Tutorial-Empfehlungen: „Angular Tutorial“]

2. Die Beziehung zwischen Komponenten und Anweisungen

Wenn Sie sich den Angular-Quellcode ansehen, können Sie die folgende Definition sehen

/**
 * Supplies configuration metadata for an Angular component.
 *
 * @publicApi
 */
export declare interface Component extends Directive {

Ja, Komponente ist von der Richtlinie abgeleitet, das heißt, die Komponente gehört zur Richtlinie.

2.1. Arten von Anweisungen

• Komponente ist eine Unterschnittstelle von Direktive und eine spezielle Anweisung kann HTML-Vorlagen haben, Direktive kann jedoch keine Vorlagen haben.

• Attributtyp-Direktiven: Wird verwendet, um das Erscheinungsbild und Verhalten von DOM-Elementen zu ändern, ändert jedoch nicht die DOM-Struktur. Zu den typischen Attributtyp-Direktiven in den integrierten Direktiven von Angular gehören ngClass und ngStyle Kapseln Sie Ihre eigene Komponentenbibliothek und Attributtypanweisungen. Dies ist ein Muss.

• Strukturanweisungen: Sie können die DOM-Struktur ändern. Zu den integrierten allgemeinen Strukturanweisungen gehören *ngFor, *ngIf und *ngSwitch</code >. Da Strukturanweisungen die DOM-Struktur ändern, können nicht mehrere Strukturanweisungen gleichzeitig für dasselbe HTML-Tag verwendet werden. Wenn Sie mehrere Strukturanweisungen für dasselbe HTML-Element verwenden möchten, können Sie erwägen, eine leere Ebene von Elementen hinzuzufügen, um sie zu verschachteln, z. B. eine leere Ebene außerhalb (<code>p). *ngFor、*ngIf 和 *ngSwitch。由于结构型指令会修改 DOM 结构，因而同一个 HTML 标签上面不能同时使用多个结构型指令。如果要在同一个 HTML 元素上面使用多个结构性指令，可以考虑加一层空的元素来嵌套，比如在外面套一层空的（p) 。

3. Angular 中指令的用途

Angualr中用指令来增强DOM的功能，包括 HTML 原生DOM和我们自己自定义的组件（Component）。举例来说，可以扩展一个Button，实现避免点击后，服务器端未响应前的二次点击；高亮某些收入内容等等。

4. 指令举例

4.1. 指令功能

实现一个指令，鼠标移动到上面时， 背景显示为黄色，鼠标移开，恢复正常。

4.2. Anuglar CLI生成基本文件

ng generate directive MyHighlight

Anuglar CLI自动生成html、css、ut等文件。

4.3. Directive指令核心代码

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

4.4. 使用该指令

<p my-highlight>Highlight me!</p>

my-highlight 即我们的元素扩展属性（指令、directive）。

5. 总结

• 指令（Directive）用于扩展DOM 元素或组件的功能。

• Angular中的 *ngFor、*ngIf 和 *ngSwitch

3. Der Zweck von Anweisungen in Angular

Das obige ist der detaillierte Inhalt vonLassen Sie uns über Direktiven in Angular sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!