Powielanie dyrektyw

Ponieważ nie definiujemy wszystkich komponentów i dyrektyw bezpośrednio w każdym komponencie, który tego potrzebuje, musimy zdawać sobie sprawę z tego, w jaki sposób moduły Angular obsługują dyrektywy i komponenty. Załóżmy przez chwilę, że przez pomyłkę stworzyliśmy dwie dyrektywy, które dotyczą tej samej własności:

Ten przykład jest odmianą kodu znajdującego się w oficjalnej dokumentacji.

blue-highlight.directive.ts

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

@Directive({
  selector: '[appHighlight]'
})
export class BlueHighlightDirective {
  constructor(renderer: Renderer, el: ElementRef) {
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'blue');
    renderer.setElementStyle(el.nativeElement, 'color', 'gray');
  }
}

yellow-highlight.directive.ts

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

@Directive({
  selector: '[appHighlight]'
})
export class YellowHighlightDirective {
  constructor(renderer: Renderer, el: ElementRef) {
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

Te dwie dyrektywy są podobne, próbują nadać styl elementu. BlueHighlightDirective spróbuje ustawić kolor tła elementu na niebieski, zmieniając kolor tekstu na szary, podczas gdy YellowHighlightDirective spróbuje tylko zmienić kolor tła na żółty. Zauważ, że obie są kierowane na dowolny element HTML, który ma właściwość appHighlight. Co by się stało, gdybyśmy dodali obie dyrektywy do tego samego modułu?

app.module.ts

// Imports

@NgModule({
  imports: [BrowserModule],
  declarations: [
    AppComponent,
    BlueHighlightDirective,
    YellowHighlightDirective
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Zobaczmy, jak wykorzystalibyśmy go w jedynym komponencie modułu.

app.component.ts

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

@Component({
  selector: 'app-root',
  template: '<h1 appHighlight>My Angular App</h1>'
})
export class AppComponent {}

Widzimy, że w szablonie naszego komponentu używamy dyrektywy appHighlight w naszym elemencieh1, ale które style zostaną ostatecznie zastosowane?

Odpowiedź brzmi: tekst będzie szary, a tło żółte.

Zobacz przykład [016]

Możemy zdefiniować wiele dyrektyw dotyczących tych samych elementów w tym samym module. To, co się stanie, to to, że Angular zrobi każdą transformację po kolei .

declarations: [
  ...,
  BlueHighlightDirective,
  YellowHighlightDirective
]

Ponieważ zdefiniowaliśmy obie dyrektywy w tablicy, a tablice są uporządkowanym zbiorem elementów , gdy kompilator znajdzie element z właściwością appHighlight, najpierw zastosuje transformacjeBlueHighlightDirective, ustawiając tekst na szary i niebieskie tło, a następnie zastosuje transformacje YellowHighlightDirective, zmieniając ponownie kolor tła na żółty.

Podsumowując, gdy dwie lub więcej dyrektyw dotyczy tego samego elementu, będą one stosowane w kolejności, w jakiej zostały zdefiniowane .