Winkel 4 - Richtlinien
Directives in Angular ist a js Klasse, die als deklariert ist @directive. Wir haben 3 Direktiven in Angular. Die Richtlinien sind unten aufgeführt -
Komponentenrichtlinien
Diese bilden die Hauptklasse mit Details darüber, wie die Komponente zur Laufzeit verarbeitet, instanziiert und verwendet werden soll.
Strukturelle Richtlinien
Eine Strukturanweisung befasst sich im Wesentlichen mit der Manipulation der dom-Elemente. Strukturrichtlinien haben ein * -Zeichen vor der Richtlinie. Zum Beispiel,*ngIf und *ngFor.
Attribut-Direktiven
Attributanweisungen befassen sich mit der Änderung des Aussehens und Verhaltens des dom-Elements. Sie können Ihre eigenen Anweisungen wie unten gezeigt erstellen.
Wie erstelle ich benutzerdefinierte Anweisungen?
In diesem Abschnitt werden benutzerdefinierte Anweisungen erläutert, die in Komponenten verwendet werden sollen. Benutzerdefinierte Anweisungen werden von uns erstellt und sind nicht Standard.
Lassen Sie uns sehen, wie die benutzerdefinierte Direktive erstellt wird. Wir werden die Direktive über die Kommandozeile erstellen. Der Befehl zum Erstellen der Direktive über die Befehlszeile lautet -
ng g directive nameofthedirective
e.g
ng g directive changeText
So wird es in der Kommandozeile angezeigt
C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
create src\app\change-text.directive.spec.ts
create src\app\change-text.directive.ts
update src\app\app.module.ts
Die obigen Dateien, dh change-text.directive.spec.ts und change-text.directive.ts erstellt werden und die app.module.ts Datei wird aktualisiert.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Das ChangeTextDirectiveKlasse ist in den Deklarationen in der obigen Datei enthalten. Die Klasse wird auch aus der unten angegebenen Datei importiert.
Text ändern. Richtlinie
import { Directive } from '@angular/core';
@Directive({
selector: '[changeText]'
})
export class ChangeTextDirective {
constructor() { }
}
Die obige Datei hat eine Direktive und eine Selector-Eigenschaft. Was auch immer wir im Selektor definieren, dasselbe muss in der Ansicht übereinstimmen, in der wir die benutzerdefinierte Direktive zuweisen.
In dem app.component.html Ansicht, lassen Sie uns die Richtlinie wie folgt hinzufügen -
<div style="text-align:center">
<span changeText >Welcome to {{title}}.</span>
</div>
Wir werden die Änderungen in schreiben change-text.directive.ts Datei wie folgt -
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. ";
}
}
In der obigen Datei gibt es eine Klasse namens ChangeTextDirective und einen Konstruktor, der das Element vom Typ nimmt ElementRef, was obligatorisch ist. Das Element enthält alle Details, zu denen dasChange Text Richtlinie angewendet wird.
Wir haben die hinzugefügt console.logElement. Die Ausgabe derselben wird in der Browserkonsole angezeigt. Der Text des Elements wird ebenfalls wie oben gezeigt geändert.
Der Browser zeigt nun Folgendes an.