Detaillierte Erklärung der Ansichtszusammenfassungsdefinition im Angular-Framework

Vorwort

Als Front-End-Framework, das „für große Front-End-Projekte“ entwickelt wurde, verfügt Angular tatsächlich über viele Designs, die es wert sind, nachgeschlagen und gelernt zu werden. Diese Serie dient hauptsächlich dazu, die Implementierungsprinzipien dieser Designs und Funktionen zu studieren. Dieser Artikel stellt hauptsächlich einige Definitionen im Zusammenhang mit Ansichten in Angular vor.

Ansichtsabstraktion in Angular

Angular-Versionen können auf verschiedenen Plattformen ausgeführt werden: im Browser, auf mobilen Plattformen oder in einem Web Worker. Daher ist ein gewisses Maß an Abstraktion zwischen den plattformspezifischen APIs und den Framework-Schnittstellen erforderlich.

Angular kapselt die Unterschiede zwischen verschiedenen Plattformen durch Abstraktion und erscheint in Form der folgenden Referenztypen: ElementRef, TemplateRef, ViewRef, ComponentRef und ViewContainerRef.

Definition der abstrakten Klassenansicht

Wenn Sie beim Lesen des Quellcodes die Unterschiede zwischen diesen Definitionen nicht verstehen, können Sie leicht verwirrt werden. Lassen Sie uns also zunächst den Unterschied zwischen ihnen verstehen.

Element ElementRef

ElementRef ist die grundlegendste Abstraktion. Wenn Sie sich die Klassenstruktur ansehen, können Sie erkennen, dass sie nur damit verbundene lokale Elemente enthält:

exportiere Klasse ElementRef<T = beliebig> {
 // Das zugrunde liegende native Element // ist null, wenn der direkte Zugriff auf native Elemente nicht unterstützt wird (beispielsweise wenn die Anwendung in einem Web Worker ausgeführt wird)
 öffentliches nativesElement: T;
 Konstruktor(nativeElement: T) {
 dies.nativeElement = nativesElement;
 }
 ...
}

Über diese API ist ein direkter Zugriff auf native DOM-Elemente möglich, vergleichbar mit document.getElementById('myId'). Angular empfiehlt jedoch nicht die direkte Verwendung. Versuchen Sie, die von Angular bereitgestellten Vorlagen und Datenbindungen so weit wie möglich zu verwenden.

VorlageRef

In Angular werden Vorlagen verwendet, um den Code für die Darstellung der Ansicht einer Komponente in HTML zu definieren.

Die Vorlage wird über den Dekorator @Component() mit der Komponentenklasse verknüpft. Der Vorlagencode kann inline als Wert der Vorlageneigenschaft bereitgestellt oder über die Eigenschaft templateUrl mit einer separaten HTML-Datei verknüpft werden.

Andere durch TemplateRef-Objekte dargestellte Vorlagen werden verwendet, um einige alternative Ansichten oder eingebettete Ansichten zu definieren, die von mehreren verschiedenen Komponenten stammen können. Ein TemplateRef ist eine Reihe von DOM-Elementen (ElementRef), die in Ansichten in Ihrer gesamten Anwendung wiederverwendet werden können:

exportiere abstrakte Klasse TemplateRef<C> {
 //Das Ankerelement in der übergeordneten Ansicht dieser eingebetteten Ansicht abstract get elementRef(): ElementRef;
 // Instanziieren Sie eine eingebettete Ansicht basierend auf dieser Vorlage und hängen Sie sie an den Ansichtscontainer an. Abstract createEmbeddedView (Kontext: C): EmbeddedViewRef<C>;
 ...
}

An sich ist die Klasse TemplateRef eine einfache Klasse, die nur aus Folgendem besteht:

elementRef-Attribut: enthält einen Verweis auf sein Host-Element
Methode „createEmbeddedView“: Sie ermöglicht uns, eine Ansicht zu erstellen und gibt ihre Referenz als ViewRef zurück.
Vorlagen kombinieren einfaches HTML mit der Datenbindungssyntax, Anweisungen und Vorlagenausdrücken von Angular. Angular-Elemente fügen diese Werte ein oder berechnen sie, um HTML-Elemente zu ändern, bevor die Seite angezeigt wird.

Ansichten in Angular

In Angular ist eine Ansicht die kleinste Gruppierungseinheit anzeigbarer Elemente, die zusammen erstellt und zerstört werden. Die Angular-Philosophie ermutigt Entwickler, sich die Benutzeroberfläche als eine Zusammenstellung von Ansichten vorzustellen (und nicht als einen Baum aus unabhängigen HTML-Tags).

Eine Komponentenklasse und die zugehörige Vorlage definieren eine Ansicht. In einer bestimmten Implementierung wird eine Ansicht durch eine mit der Komponente verknüpfte ViewRef-Instanz dargestellt.

Referenz anzeigen

ViewRef stellt eine Angular-Ansicht dar:

exportiere deklariere abstrakte Klasse ViewRef erweitert ChangeDetectorRef {
  //Zerstöre die Ansicht und alle damit verbundenen Datenstrukturen abstract get destroyed(): boolean;
  // Melden, ob diese Ansicht zerstört wurde abstract destroy(): void;
  // Lebenszyklus-Hook, um andere vom Entwickler definierte Bereinigungsfunktionen für die Ansicht „Abstract“ bereitzustellen: onDestroy(callback: Function): any;
}

Darunter stellt ChangeDetectorRef die Basisklasse für Änderungserkennungsfunktionen bereit, die verwendet wird, um alle Ansichten zu sammeln, die im Änderungserkennungsbaum auf Änderungen überprüft werden sollen:

export deklarieren abstrakte Klasse ChangeDetectorRef {
  // Eine Komponente wird normalerweise als fehlerhaft markiert (muss neu gerendert werden), wenn sich eine Eingabe geändert hat oder ein Ereignis in der Ansicht ausgelöst wurde.
  // Rufen Sie diese Methode auf, um sicherzustellen, dass die Komponente überprüft wird, auch wenn diese Auslöser nicht auftreten. abstract checkNoChanges(): void;
  // Trennen Sie die Ansicht vom Änderungserkennungsbaum. Die abgetrennte Ansicht wird erst überprüft, wenn sie erneut verbunden wird.
  // In Verbindung mit detectChanges() verwenden, um lokale Überprüfungen zur Änderungserkennung zu implementieren. abstract detach(): void;
  // Überprüfen Sie diese Ansicht und ihre untergeordneten Ansichten. Verwenden Sie sie mit detach(), um die lokale Änderungserkennung zu implementieren. Überprüfen Sie abstrakte detectChanges(): void;
  //Überprüfen Sie den Änderungsdetektor und seine untergeordneten Elemente und werfen Sie diese Ausnahme, wenn Änderungen erkannt werden. Abstract markForCheck(): void;
  // Eine zuvor getrennte Ansicht erneut an den Änderungserkennungsbaum anhängen // Standardmäßig wird die Ansicht an den Baum angehängt abstract reattach(): void;
}

Zwei Arten von Ansichten

Angular unterstützt zwei Arten von Ansichten:

(1) Eine eingebettete Ansicht (embeddedView), die mit einer Vorlage (template) verknüpft ist.

Eine eingebettete Ansicht stellt eine Angular-Ansicht innerhalb eines Ansichtscontainers dar. Eine Vorlage ist nichts weiter als eine Blaupause, die eine Ansicht enthält, und eine Ansicht kann aus einer Vorlage mithilfe der oben beschriebenen Methode createEmbeddedView instanziiert werden.

(2) Link zur Host-Ansicht (hostView) der Komponente.

Eine Ansicht, die direkt zu einer Komponente gehört, wird als Hostansicht bezeichnet.

Die Hostansicht wird erstellt, wenn die Komponente dynamisch instanziiert wird. Sie können ComponentFactoryResolver verwenden, um eine Komponente dynamisch zu erstellen und zu instanziieren. In Angular ist jede Komponente an eine bestimmte Injektorinstanz gebunden, daher übergeben wir beim Erstellen einer Komponente die aktuelle Injektorinstanz.

Die Eigenschaften einzelner Elemente in einer Ansicht können als Reaktion auf Benutzeraktionen dynamisch geändert werden. Die Struktur (Anzahl oder Reihenfolge) dieser Elemente ist jedoch nicht möglich. Sie können die Struktur dieser Elemente ändern, indem Sie in ihren Ansichtscontainern eingebettete Ansichten einfügen, verschieben oder entfernen.

Containerreferenz anzeigen

ViewContainerRef ist ein Container, der einer Komponente eine oder mehrere Ansichten anhängen kann:

export deklariere abstrakte Klasse ViewContainerRef {
  // Ankerelement, das verwendet wird, um die Position dieses Containers in der enthaltenen Ansicht anzugeben // Jeder Ansichtscontainer kann nur ein Ankerelement haben und jedes Ankerelement kann nur einen Ansichtscontainer haben abstract get element(): ElementRef;
  //DI dieses Ansichtscontainers
  abstrakter Injektor abrufen (): Injektor;
  // Wie viele Ansichten sind derzeit an diesen Container angehängt? Abstract get length(): number;
  // Alle Ansichten in diesem Container zerstören abstract clear(): void;
  // Instanziieren Sie eine einzelne Komponente und fügen Sie ihre Hostansicht in diesen Container ein. Abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
  // Eine eingebettete Ansicht instanziieren und einfügen abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>;
  // Die Ansicht von diesem Container trennen, ohne sie zu zerstören. Abstract detach(index?: number): ViewRef | null;
  // Eine Ansicht aus diesem Container abrufen abstract get(index: number): ViewRef | null;
  // Gibt den Index der Ansicht im aktuellen Container zurück abstract indexOf(viewRef: ViewRef): number;
  // Verschieben Sie die Ansicht an eine neue Position in diesem Container. Abstract Insert(viewRef: ViewRef, index?: number): ViewRef;
  abstrakte Verschiebung (viewRef: ViewRef, currentIndex: Nummer): ViewRef;
  // Zerstöre die an diesen Container angehängte Ansicht. Abstract Remove(Index?: Nummer): void;
}

Jedes DOM-Element kann als View-Container verwendet werden. Angular fügt keine Views innerhalb des Elements ein, sondern hängt sie nach dem an den ViewContainer gebundenen Element an.

Normalerweise ist ein ng-Container-Element die beste Wahl, um zu markieren, wo der ViewContainer erstellt werden soll. Es wird als Kommentar gerendert, sodass keine zusätzlichen HTML-Elemente in das DOM eingeführt werden.

Über ViewContainerRef können Sie eine Hostansicht erstellen, wenn Sie eine Komponente mit der Methode createComponent() instanziieren, oder eine eingebettete Ansicht erstellen, wenn Sie ein TemplateRef mit der Methode createEmbeddedView() instanziieren.

Instanzen von Ansichtscontainern können auch andere Ansichtscontainer enthalten, um hierarchische Ansichten (Ansichtsbäume) zu erstellen.

Hierarchie anzeigen

In Angular sind Ansichten normalerweise in Ansichtshierarchien organisiert. Der Ansichtsbaum ist ein Baum verwandter Ansichten, die als Ganzes agieren und eine der Schlüsselkomponenten der Angular-Änderungserkennung sind.

Die Stammansicht des Ansichtsbaums ist die Hostansicht der Komponente. Eine Hostansicht kann die Wurzel eines eingebetteten Ansichtsbaums sein, der in einem Ansichtscontainer (ViewContainerRef) auf der Hostkomponente gesammelt wird. Der Ansichtsbaum kann dynamisch geladen und entladen werden, während der Benutzer durch die Anwendung navigiert (beispielsweise mithilfe eines Routers).

Der Ansichtsbaum und der Komponentenbaum stimmen nicht eins zu eins überein:

• Eine in einen angegebenen Ansichtsstrukturkontext eingebettete Ansicht, die auch die Hostansicht anderer Komponenten sein kann
• Die Komponente kann sich im selben NgModule wie die Hostkomponente befinden oder zu einem anderen NgModule gehören.
  

Komponenten, Vorlagen, Ansichten und Module

In Angular definieren Sie die Ansicht einer Komponente über die zugehörige Vorlage. Eine Vorlage ist HTML, das Angular mitteilt, wie die Komponente gerendert werden soll.

Ansichten sind normalerweise hierarchisch organisiert, sodass Sie sie als Einheit von UI-Partitionen oder Seiten ändern, anzeigen oder ausblenden können. Eine direkt mit einer Komponente verknüpfte Vorlage definiert die Hostansicht für diese Komponente. Die Komponente kann auch eine Ansichtshierarchie definieren, die einige eingebettete Ansichten enthält, die als Hosts für andere Komponenten dienen.

Eine Ansichtshierarchie kann Ansichten für Komponenten im selben Modul (NgModule) enthalten und kann (und tut dies häufig) Ansichten für Komponenten enthalten, die in anderen Modulen definiert sind.

Zusammenfassen

Dieser Artikel stellt kurz einige ansichtsbezogene Definitionen in Elementen, Ansichten, Vorlagen und Komponenten in Angular vor, darunter ElementRef, TemplateRef, ViewRef, ComponentRef und ViewContainerRef.

Unter ihnen ist die Ansicht der grundlegende Baustein der Anwendungs-UI in Angular, die kleinste Gruppe von Elementen, die zusammen erstellt und zerstört werden.

ViewContainerRef wird hauptsächlich zum Erstellen und Verwalten eingebetteter Ansichten oder Komponentenansichten verwendet. Komponenten können Ansichten definieren, indem sie Vorlagen konfigurieren. Die direkt mit einer Komponente verknüpfte Vorlage definiert die Hostansicht der Komponente. Komponenten können auch eingebettete Ansichten enthalten.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Ansichtsabstraktdefinition des Angular-Frameworks. Weitere relevante Inhalte zur Ansichtsabstraktdefinition von Angular finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

siehe

• Einführung in Angular-Komponenten
• Angular-Glossar
• Erkunden von Angular DOM-Manipulationstechniken mit ViewContainerRef