Beispiele für fortgeschrittene Angular-Komponentenmuster

Angular hat Version 5 erreicht. Ich habe Front-End-Rekonstruktionsarbeiten in mehreren wichtigen Projekten des Unternehmens implementiert. Während dieses Prozesses wurde mir allmählich klar, dass es für das MVVM-Framework selbst auf der Nutzungsebene notwendig ist, es zu beherrschen einige gängige Muster, insbesondere die Komponenten, die jetzt in der Entwicklung sehr beliebt sind. Auf diese Weise können wir in der tatsächlichen Arbeit nahtlos (oder mit sehr geringem Zeit- und Kostenaufwand) auf jedes MVVM-Framework umsteigen und die eingesparte Zeit nutzen, um neues Wissen zu erlernen.

Ich habe den Blog von Angular In Depth in letzter Zeit verfolgt. Ich habe gelegentlich diese Artikelserie gesehen und hatte das Gefühl, dass die Qualität ziemlich hoch war, also habe ich mir die Zeit genommen, sie zu übersetzen und mit allen zu teilen, und habe einen hinzugefügt Ich hoffe, dass meine bescheidene Meinung nach jedem Artikel die Wirkung hat, andere zu inspirieren. Wenn meine Meinung falsch ist, können Sie sie gerne kommentieren.

Wie in Kent C. Dodds Advanced React Component Patterns werden wir diese Muster anhand einer relativ einfachen <toggle>-Komponente veranschaulichen. Die Aufgabe der <toggole>-Komponente besteht lediglich darin, eine einfache boolesche Zustandseigenschaft zu verwalten: on. Der Zweck der Veranschaulichung mit solch einfachen Komponenten besteht darin, dass wir Mustern, die komplexer sind als die Komponenten selbst, mehr Aufmerksamkeit widmen können.

In dieser Artikelserie werde ich Links zu voll funktionsfähigem, ausführbarem Democode bereitstellen. Sie müssen sich nur auf den Ordner app und den Ordner toggle konzentrieren. Der Ordner toggle enthält einige wiederverwendbare Bibliotheken (eine Reihe von Komponenten). Natürlich wird sich diese Bibliothek im Verlauf des Artikels ändern. Der Ordner app und insbesondere app.component.html werden entsprechend geändert, um die Verwendung der Bibliothek in verschiedenen Situationen zu berücksichtigen.

Wir beginnen mit der Originalversion toggle der Komponente. Es gibt nur ein @Input()-Attribut, das den on-Dekorator verwendet. Der von diesem Attribut gesteuerte Zustand stellt den Schalterstatus der Komponente selbst dar. Es verfügt auch über einen @Output()-Ereignisemitter, der den toggle-Dekorator verwendet Der Ereignisemitter benachrichtigt die übergeordnete Komponente, wenn sich der Schaltzustand der Komponente ändert.

Verwandte Empfehlungen:

So führen Sie externe Stile in Angular-Komponenten ein

Methode mit zwei modalen Angular-Popup-Boxen

AngularJS-Tutorial und Beispielcodeanalyse

Das obige ist der detaillierte Inhalt vonBeispiele für fortgeschrittene Angular-Komponentenmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!