Angular7 - dyrektywy
Dyrektywy w Angular to klasa js, która jest zadeklarowana jako @directive. Mamy 3 dyrektywy w Angular. Dyrektywy są wymienione poniżej -
Dyrektywy składowe
Tworzą one główną klasę zawierającą szczegółowe informacje o tym, jak komponent powinien być przetwarzany, tworzony i używany w czasie wykonywania.
Dyrektywy strukturalne
Dyrektywa Structure zasadniczo zajmuje się manipulowaniem elementami dom. Dyrektywy strukturalne mają znak * przed dyrektywą. Na przykład,*ngIf i *ngFor.
Dyrektywy atrybutów
Dyrektywy atrybutów dotyczą zmiany wyglądu i zachowania elementu dom. Możesz tworzyć własne dyrektywy, jak wyjaśniono w poniższej sekcji.
Jak tworzyć niestandardowe dyrektywy?
W tej sekcji omówimy dyrektywy niestandardowe, które mają być używane w komponentach. Dyrektywy niestandardowe są tworzone przez nas i nie są standardem.
Zobaczmy, jak utworzyć dyrektywę niestandardową. Utworzymy dyrektywę za pomocą wiersza poleceń. Polecenie do utworzenia dyrektywy za pomocą wiersza poleceń jest następujące -
ng g directive nameofthedirective 
e.g 
ng g directive changeTextPojawia się w wierszu poleceń, jak podano w poniższym kodzie -
C:\projectA7\angular7-app>ng g directive changeText 
CREATE src/app/change-text.directive.spec.ts (241 bytes) 
CREATE src/app/change-text.directive.ts (149 bytes) 
UPDATE src/app/app.module.ts (565 bytes)Powyższe pliki, tj. Change-text.directive.spec.ts i change-text.directive.ts są tworzone, a plik app.module.ts jest aktualizowany.
app.module.ts
import { BrowserModule } from'@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from'./new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive';
@NgModule({ 
   declarations: [ 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }Plik ChangeTextDirectiveklasa jest zawarta w deklaracjach w powyższym pliku. Klasa jest również importowana z pliku podanego poniżej -
change-text.directive
import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}Powyższy plik ma dyrektywę oraz właściwość selektora. Cokolwiek zdefiniujemy w selektorze, to samo musi pasować w widoku, w którym przypisujemy dyrektywę custom.
W widoku app.component.html dodajmy dyrektywę w następujący sposób -
<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>
<div style = "text-align:center"> 
   <span changeText >Welcome to {{title}}.</span> 
</div>Zmiany zapiszemy w change-text.directive.ts plik w następujący sposób -
change-text.directive.ts
import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive.";
   }
}W powyższym pliku znajduje się klasa o nazwie ChangeTextDirective i konstruktor, który przyjmuje element typu ElementRef, co jest obowiązkowe. Element zawiera wszystkie szczegóły, do którychChange Text dyrektywy.
Dodaliśmy element console.log. Wynik tego samego można zobaczyć w konsoli przeglądarki. Tekst elementu również zostanie zmieniony, jak pokazano powyżej.
Teraz przeglądarka pokaże następujące informacje -
 
                Szczegóły elementu, dla którego selektor dyrektywy są podane w konsoli. Ponieważ dodaliśmychangeText dyrektywy do znacznika span, zostaną wyświetlone szczegóły elementu span.