Ein praktischer Leitfaden für die Verwendung und Erstellung von Angular -Richtlinien

Ein praktischer Leitfaden für die Verwendung und Erstellung von Angular -Richtlinien - SitePoint

Dieser Artikel konzentriert

Richtlinien sind vielleicht das wichtigste Stück einer Winkelanwendung, und wenn wir darüber nachdenken, ist die am häufigsten verwendete Winkeleinheit, die Komponente, tatsächlich eine Richtlinie.

Eine Winkelkomponente ist nicht mehr als eine Richtlinie mit einer Vorlage. Wenn wir sagen, dass Komponenten die Bausteine von Winkelanwendungen sind, sagen wir tatsächlich, dass Anweisungen die Bausteine von Winkelanwendungen sind.

Key Takeaways

grundlegende Übersicht

Im Kern ist eine Anweisung eine Funktion, die ausgeführt wird, wenn der Winkel Compiler sie im DOM findet. Angular -Richtlinien werden verwendet, um die Leistung der HTML zu erweitern, indem sie eine neue Syntax verleiht. Jede Richtlinie hat einen Namen-entweder eines aus dem eckigen vordefinierten NG-Repeat oder einem benannten benannten NG-Repeat. Und jede Richtlinie bestimmt, wo sie verwendet werden kann: in einem Element, einem Attribut, einer Klasse oder einem Kommentar.

standardmäßig sind Winkelanweisungen aus Winkelversionen 2 und weiter in drei verschiedene Typen unterteilt:

Komponenten

Wie wir bereits gesehen haben, sind Komponenten nur Anweisungen mit Vorlagen. Unter der Motorhaube verwenden sie die Richtlinie -API und geben uns einen saubereren Weg, um sie zu definieren.

Die beiden anderen Anweisungsarten haben keine Vorlagen. Stattdessen sind sie speziell auf DOM -Manipulation zugeschnitten.

Attributanweisungen

Attributanweisungen manipulieren Sie das DOM, indem Sie sein Verhalten und sein Aussehen ändern.

Wir verwenden Attributanweisungen, um einen bedingten Stil auf Elemente anzuwenden, Elemente zu zeigen oder auszublenden oder das Verhalten einer Komponente dynamisch nach einer sich ändernden Eigenschaft zu ändern.

strukturelle Richtlinien

Diese sind speziell auf das Erstellen und Zerstören von Dom -Elementen zugeschnitten.

Einige Attributanweisungen - wie versteckt, die ein Element zeigen oder versteckt - beibehalten das DOM im Grunde genommen so, wie es ist. Die strukturellen Winkelrichtlinien sind jedoch viel weniger domend freundlich, da sie Elemente aus dem DOM hinzufügen oder vollständig entfernen. Wenn wir diese verwenden, müssen wir also besonders vorsichtig sein, da wir die HTML -Struktur tatsächlich ändern.

Verwenden der vorhandenen Winkelanweisungen

Es ist ziemlich einfach, die vorhandenen Anweisungen in Angular zu verwenden. Wenn Sie in der Vergangenheit eine Winkelanwendung geschrieben haben, bin ich mir ziemlich sicher, dass Sie sie verwendet haben. Die NGCLASS -Direktive ist ein gutes Beispiel für eine vorhandene Winkelattributanweisung:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Nach dem Login kopieren

Wenn wir also die NGCLASS -Anweisung im folgenden Beispiel verwenden, fügen wir die blaue Klasse zu unserem Absatz hinzu und fügen den gelben explizit nicht hinzu. Da wir das Erscheinungsbild einer Klasse ändern und die tatsächliche HTML -Struktur nicht ändern, ist dies eindeutig eine Attributanweisung. Aber Angular bietet auch strukturelle Anweisungen aus dem Box, wie das ngif:

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

Nach dem Login kopieren

In diesem Beispiel verwenden wir die NGIF -Direktive, um den Text mit einer Schaltfläche hinzuzufügen oder zu entfernen. In diesem Fall ist die HTML -Struktur selbst betroffen, daher ist sie eindeutig eine strukturelle Richtlinie.

Für eine vollständige Liste der verfügbaren Angular -Richtlinien können wir die offizielle Dokumentation überprüfen.

Wie wir gesehen haben, ist die Verwendung von Angular -Richtlinien recht einfach. Die wahre Kraft der Angular -Richtlinien ist mit der Fähigkeit verbunden, unsere eigenen zu schaffen. Angular bietet eine saubere und einfache API für die Erstellung von benutzerdefinierten Anweisungen, und das werden wir in den folgenden Abschnitten betrachten.

Erstellen einer Attributanweisung

Erstellen einer Anweisung ähnelt dem Erstellen einer Komponente. Aber in diesem Fall verwenden wir den @Directive Decorator. Für unser Beispiel werden wir eine Anweisung namens "my-fehler-direkten" erstellen, die den Hintergrund eines Elements rot hervorhebt, um einen Fehler anzuzeigen.

Für unser Beispiel werden wir das Angular 2 QuickStart -Paket verwenden. Wir müssen nur das Repository klonen und dann NPM Install und NPM -Start ausführen. Es bietet uns eine Boilerplate -App, mit der wir experimentieren können. Wir werden unsere Beispiele auf dieser Kesselplatte erstellen.

Beginnen wir zunächst eine Datei namens app.myerrordirective.ts im SRC/App -Ordner und fügen Sie den folgenden Code hinzu:

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

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Nach dem Login kopieren

Nach dem Importieren der Direktive von @Angular/Core können wir sie dann verwenden. Erstens brauchen wir einen Selektor, der der Richtlinie einen Namen gibt. In diesem Fall nennen wir es my-fehler.

Best Practice schreibt vor, dass wir bei der Benennung unserer Winkelrichtlinien immer ein Präfix verwenden. Auf diese Weise werden wir mit Sicherheit Konflikte mit Standard -HTML -Attributen vermeiden. Wir sollten das NG -Präfix auch nicht verwenden. Das wird von Angular verwendet, und wir möchten unsere benutzerdefinierten Angular -Richtlinien nicht mit angular -vordefinierten Angular -Richtlinien verwechseln. In diesem Beispiel ist unser Präfix mein-.

Wir haben dann eine Klasse erstellt, myerrordirective. Um auf ein Element unseres DOM zuzugreifen, müssen wir ElementRef verwenden. Da es auch zum @Angular/Core -Paket gehört, ist es eine einfache Frage, es zusammen mit der Richtlinie und zu verwenden.

Wir haben dann den Code hinzugefügt, um den Konstruktor unserer Klasse tatsächlich hervorzuheben.

Um diese neu erstellte Anweisung zu verwenden, müssen wir sie den Erklärungen in der App.module.ts Datei:

hinzufügen:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Nach dem Login kopieren

Schließlich möchten wir die gerade erstellte Richtlinie nutzen. Navigieren wir dazu zur Datei app.comPonent.ts und fügen Sie Folgendes hinzu:

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

Nach dem Login kopieren

Das Endergebnis sieht ähnlich aus:

Ein praktischer Leitfaden für die Verwendung und Erstellung von Angular -Richtlinien - SitePoint

Erstellen einer strukturellen Richtlinie

Im vorherigen Abschnitt haben wir gesehen, wie man eine Attributanweisung mit Angular erstellt. Der Ansatz zur Schaffung eines strukturellen Verhaltens ist genau der gleiche. Wir erstellen eine neue Datei mit dem Code für unsere Richtlinie, fügen sie dann den Erklärungen hinzu und verwenden sie schließlich in unserer Komponente.

Für unsere strukturelle Richtlinie werden wir eine Kopie der NGIF -Richtlinie implementieren. Auf diese Weise werden wir nicht nur eine Richtlinie implementieren, sondern auch einen Blick darauf werfen, wie Angular -Richtlinien mit Dingen hinter den Kulissen umgehen.

Beginnen wir mit unserer App.mycustomifdirective.ts Datei:

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

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Nach dem Login kopieren

Wie wir sehen können, verwenden wir für diesen hauptsächlich ein paar verschiedene Importe: Eingabe, TemplateRef und ViewContainerRef. Der Eingangsdekorator wird verwendet, um Daten an die Komponente zu übergeben. Mit dem Templatoref -One wird eingebettete Ansichten instanziiert. Eine eingebettete Ansicht stellt einen Teil eines zu rendernden Layouts dar und ist mit einer Vorlage verbunden. Schließlich ist der ViewContainerRef ein Container, in dem eine oder mehrere Ansichten angebracht werden können. Zusammen funktionieren diese Komponenten wie folgt:

Direktiven erhalten Zugriff auf den Ansichtscontainer, indem Sie einen ViewContainerRef injizieren. Eingebettete Ansichten werden erstellt und an einen Ansichtsbehälter angehängt, indem die CreateMbededView -Methode von ViewContainerRef aufgerufen und in die Vorlage geleitet wird. Wir möchten die Vorlage verwenden, an die unsere Richtlinie beigefügt ist, damit wir die injizierte Templatoref übergeben. - Aus Rangle.ios Angular 2 -Training

Als nächstes fügen wir es unseren Deklaratoren hinzu:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyErrorDirective } from './app.myerrordirective';

import { AppComponent }  from './app.component';

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

Nach dem Login kopieren

Und wir verwenden es in unserer Komponente:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Nach dem Login kopieren

Die Art von Ansatz, die von strukturellen Richtlinien bereitgestellt wird, kann sehr nützlich sein, z. Beispielsweise sollte ein Site -Administrator in der Lage sein, alles zu sehen und zu bearbeiten, während ein regulärer Benutzer dies nicht tun sollte. Wenn wir private Informationen mithilfe einer Attributanweisung in das DOM geladen hätten, hätten der reguläre Benutzer und alle Benutzer zu Zugriff darauf.

Winkelrichtlinien: Attribut gegen strukturelle

Wir haben uns Attribut- und Strukturrichtlinien angesehen. Aber wann sollten wir das eine oder andere verwenden?

Die Antwort könnte verwirrend sein und wir können am Ende das falsche verwenden, nur weil sie unsere Probleme löst. Es gibt jedoch eine einfache Regel, die uns helfen kann, die richtige auszuwählen. Wenn das Element, das die Richtlinie hat, im DOM immer noch nützlich sein wird, wenn das DOM nicht sichtbar ist, sollten wir es auf jeden Fall behalten. In diesem Fall verwenden wir eine Attributanweisung wie versteckt. Aber wenn das Element nicht verwendet wird, sollten wir es entfernen. Wir müssen jedoch vorsichtig sein, um einige gemeinsame Fallstricke zu vermeiden. Wir müssen die Gefahr vermeiden, Elemente immer zu verbergen, nur weil es einfacher ist. Dies wird den DOM viel komplexer machen und sich wahrscheinlich auf die Gesamtleistung auswirken. Die Gefahr, Elemente immer zu entfernen und nachzubauen, sollte ebenfalls vermieden werden. Es ist definitiv sauberer, geht aber auf Kosten der Leistung.

Insgesamt sollte jeder Fall sorgfältig analysiert werden, da die ideale Lösung immer diejenige ist, die die geringste Auswirkungen auf Ihre Anwendungsstruktur, Ihr Verhalten und Ihre Leistung hat. Diese Lösung kann entweder Attributanweisungen, strukturelle Richtlinien oder im häufigsten Szenario ein Kompromiss zwischen beiden sein.

Schlussfolgerung

In diesem Artikel haben wir uns die Winkelrichtlinien angesehen, den Kern der Winkelanwendungen. Wir haben uns die verschiedenen Arten von Richtlinien angesehen und gesehen, wie man benutzerdefinierte erstellt, die unseren Bedürfnissen entsprechen.

Ich hoffe, dass dieser Artikel Sie mit Angular -Richtlinien zum Laufen bringen konnte. Wenn Sie Fragen haben, können Sie den Kommentarbereich unten verwenden.

häufig gestellte Fragen (FAQs) zu Angular Directives

Was sind die verschiedenen Arten von Winkelanweisungen? Komponentenrichtlinien, wie der Name schon sagt, sind Anweisungen mit einer Vorlage. Sie sind im Wesentlichen Winkelkomponenten. Attributanweisungen werden verwendet, um das Verhalten, das Aussehen und das Gefühl eines DOM -Elements zu ändern. Auf der anderen Seite werden strukturelle Richtlinien verwendet, um das DOM -Layout zu manipulieren, indem Elemente im DOM addiert, entfernt oder ersetzt werden.

Wie erstelle ich eine benutzerdefinierte Richtlinie in Angular? Zunächst müssen Sie den Richtliniendekorator aus dem Winkelkern importieren. Dann müssen Sie eine Richtlinienklasse definieren und mit dem @Directive Decorator dekorieren. Die Selektoreigenschaft im Dekorateur sollte dem Namen übereinstimmen, den Sie für Ihre Richtlinie verwenden möchten. Schließlich müssen Sie Ihre Richtlinie zum Erklärungsarray in Ihrem Ngmodule hinzufügen. in deinen Vorlagen. Sie können beispielsweise die ngif -Anweisung verwenden, um Elemente bedingt zu rendern, oder mit der ngFOR -Richtlinie, um eine Liste von Elementen zu rendern. Um diese Anweisungen zu verwenden, fügen Sie sie einfach mit der entsprechenden Syntax zu Ihrer Vorlage hinzu. der Richtlinie, die eine Vorlage hat und an eine bestimmte Ansicht gebunden ist. Eine Richtlinie hingegen ist eine Möglichkeit, einem Element im DOM ein Verhalten hinzuzufügen. Während Komponenten zum Erstellen von UI -Widgets verwendet werden, werden Anweisungen verwendet, um vorhandenen Elementen Verhalten zu verleihen. in mehreren Arten. Ein gemeinsamer Weg ist die Eigenschaftbindung, bei der Sie eine Eigenschaft eines DOM -Elements an eine Eigenschaft Ihrer Komponente binden. Sie können auch eine Ereignisbindung verwenden, um auf Benutzeraktionen zu reagieren, oder auf eine Zwei-Wege-Bindung, um Ihr Modell und die Ansicht synchronisiert zu halten. In Angular wird eine Testkomponente erstellt, die die Anweisung verwendet, und dann diese Komponente zu testen. Sie können das Testbediener -Dienstprogramm verwenden, um eine dynamische Testkomponente zu erstellen, und dann die KomponentFixure verwenden, um mit der Komponente und ihrer Anweisung zu interagieren. > Ja, Sie können mehrere Direktiven für ein einzelnes Element in Angular verwenden. Sie sollten sich jedoch bewusst sein, dass die Reihenfolge, in der Richtlinien angewendet werden, das Endergebnis beeinflussen kann. Angular wendet Richtlinien in der Reihenfolge an, die in der Vorlage aufgeführt ist. Sie sollten Ihre Anweisungen in der Reihenfolge auflisten, die sie angewendet werden sollen. 🎜> Sie können Parameter in Angular mit dem @Input -Dekorator an eine Richtlinie übergeben. Auf diese Weise können Sie eine Eigenschaft Ihrer Richtlinie an einen Wert in Ihrer Komponente binden. Sie können diesen Wert dann in Ihrer Richtlinie verwenden, um sein Verhalten zu steuern.

Wie erstelle ich eine gemeinsame Anweisung in Angular? in einem gemeinsamen Modul. Sie können dieses gemeinsame Modul dann in ein anderes Modul importieren, in dem Sie die Anweisung verwenden möchten. Auf diese Weise können Sie dieselbe Richtlinie über mehrere Komponenten oder Module hinweg wiederverwenden.

Wie kann ich eine Richtlinie in Angular debuggen? Mit diesem Tool können Sie die Komponenten, Richtlinien und Dienste Ihrer Anwendung inspizieren und ihren aktuellen Zustand und ihre Abhängigkeiten sehen. Sie können die Konsole auch verwenden, um mit Ihren Anwendungen zu interagieren und zu debuggen.

Das obige ist der detaillierte Inhalt vonEin praktischer Leitfaden für die Verwendung und Erstellung von Angular -Richtlinien - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!