Detaillierte Erläuterung der Schritte zur Entwicklung von Angular2-Komponenten

Dieses Mal werde ich Ihnen eine detaillierte Schritt-für-Schritt-Anleitung für Angular2-Entwicklungskomponenten geben. Was sind die Vorsichtsmaßnahmen für Angular2-Entwicklungskomponenten?

Lassen Sie uns zunächst kurz über die Verantwortlichkeiten und den Status der Komponenten im Rahmen des ng1- bis ng2-Frameworks sprechen:

Ein Hauptmerkmal von ng1 sind Anweisungen, die unterteilt sind in Attributtypen und Tags Typ, CSS-Typ und Annotationstyp. Die in CSS-Klassen und Kommentaren geschriebenen Komponenten werden wahrscheinlich von den meisten Menschen nicht verwendet, während Anweisungen vom Typ Attribut und Anweisungen vom Typ Label einer der Gründe für die Beliebtheit von ng1 im Universum sind. In ng2 werden Tag-Typ-Anweisungen einfach getrennt, im Stil neuer Kräfte wie Vue und aufgerufener Komponenten aktualisiert und für die Handhabung aller Dinge verwendet, die mit view (DOM) zu tun haben, einschließlich der Anzeige von Daten und Animation. Attributanweisungen werden verwendet, um die Funktionen von Komponenten zu verbessern, z. B. den Empfang von Benutzereingaben und die Reaktion auf Benutzerklicks und andere Ereignisse. Tatsächlich handelt es sich bei vielen der in ng2 eingebetteten Funktionen um attributbasierte Anweisungen – ngFor, ngIf usw. – und die Komponenten hängen stärker von bestimmten Projekten ab. Daher ist es sinnvoll, projektbasierte Komponenten zu verwenden, um für Benutzer sichtbare Schnittstellen zu schreiben . Gleichzeitig müssen sich Komponenten auch mit dem Routing befassen. Man kann davon ausgehen, dass das DOM nach der Formulierung der Regeln dynamisch gerendert oder zerstört wird, um einen Front-End-Seitenwechsel zu erreichen.

Dann lasst uns darüber sprechen, wie ich in meinem vorherigen Projekt ng2-Komponenten verwendet habe, um eine Website zu erstellen:

1 Gemäß der offiziellen Praxis muss jede Anwendung eine Root-Komponente haben.

2. Differenzieren Sie das Front-End-Routing. Jeder Routing-Eintrag zeigt auf eine Komponente und jede Komponente rendert eine Seite.

3. Wenn das Projekt erweitert wird, kann ein einzelnes Modul die Geschäftsklassifizierung nicht erfüllen, daher leitet die Root-Route das Lazy Loading jedes Untermoduls und dann die Unterrouten des Untermoduls -module verweisen auf bestimmte Unterkomponenten und rendern deren jeweilige Seiten.

4. Wenn Sie sich auf eine einzelne Seite konzentrieren, die von einer einzelnen Unterkomponente gerendert wird, können Sie tatsächlich einige wiederverwendbare Tag-Blöcke in eine neue Komponente einkapseln (z. B. komplexe Datenelemente, die eine ngFor-Durchquerung erfordern). .

5. Ich habe festgestellt, dass einige Komponenten (z. B. Seitenschaltflächen oder modale Nachrichtenfelder) möglicherweise vom gesamten Projekt verwendet werden und diese in global gemeinsam genutzten Komponenten gekapselt werden müssen.

Ich finde es immer noch etwas verwirrend. Der Grund ist wahrscheinlich der Name der Komponente, da unter dem ng2-Framework alles, von Routing-Seiten bis hin zu Dateneinträgen, Komponenten und Deklarationen verwendet Gleiches gilt, daher ist es unvermeidlich, dass es zu Verwirrung kommt.

Es bleibt mir nichts anderes übrig, als die Komponenten weiterhin selbst zu unterteilen, daher hat der Autor die Komponenten von ng2 in vier Kategorien unterteilt:

Seitenkomponenten

• Beim Routing kümmern wir uns nur um die Zuordnung von Routing-Regeln und das Rendern der Schnittstelle. Für solche Komponenten ist bei der Deklaration kein Selektorparameter erforderlich (nur für die Routenpositionierung sind keine spezifischen Tags erforderlich)

• Empfangen Sie Routing-Parameter oder lösen Sie Daten auf, versuchen Sie, keine anderen geschäftlichen Interaktionsanfragen zu stellen und legen Sie keine Eingabe- und Ausgabevariablen fest

Layout-Komponenten

• Module, die zur Unterteilung von Seiten verwendet werden, können Sie auf die Verwendung von Einheitenkomponenten direkt verzichten, da

muss in Seitenkomponenten verwendet werden.

• ist nicht für das Abrufen von Routing- oder Auflösungsdaten verantwortlich und versucht, keine Daten anzufordern, sondern Daten über die Eingabe weiterzugeben oder auf Ereignisse über die Ausgabe aller Geschäftsinteraktionen zu reagieren sollte so weit wie möglich in der Layoutkomponente vervollständigt werden (nicht so schwierig wie das Platzieren in der Seitenkomponente). Chaos, und jede Layoutkomponente kann sich nicht gegenseitig beeinflussen)

Die Einheitenkomponente

• muss über einen eigenen Selektor verfügen, der im Allgemeinen in einem eigenen Modul wiederverwendbar ist und durch verschiedene Attributanweisungen geändert wird, an die

• gewöhnt ist Vereinfachen Sie wiederholte Tags auf Einheitenebene, z. B. jedes Datenelement in den erhaltenen Listendaten. Die Schnittstellenanzeige kann in eine Einheitenkomponente

• gekapselt werden, die nur für die Weitergabe von Daten verantwortlich ist Anzeigen über die Eingabe und Reagieren auf Ereignisse über die Ausgabe an die äußere Layoutkomponente oder Seitenkomponente zur Verarbeitung

Gemeinsam genutzte Komponenten

• Es muss ein Selektor vorhanden sein, eine Komponente, die vom gesamten Projekt gemeinsam genutzt wird. Die Implementierung ist relativ kostenlos und konzentriert sich darauf, die Komplexität des gesamten Projekts zu reduzieren und die Wartung zu erleichtern.

• sind besser geeignet, z. B. Nachrichten-Popup-Felder, Lade- Fortschrittsbalken usw.

• Die meisten Attribut- Basierende Anweisungen haben tatsächlich die gleiche Funktion und können genauso behandelt werden wie gemeinsam genutzte Komponenten, mit der Ausnahme, dass gemeinsam genutzte Komponenten spezifische Ansichten haben und gemeinsam genutzte Anweisungen nur zum Implementieren gemeinsamer Funktionen verwendet werden

Tatsächlich gibt es überhaupt keine technischen Schwierigkeiten. Dies impliziert nur eines: Die Anordnung des Projektverzeichnisses ist sehr wichtig.

ng2 erkennt nicht so viele Arten von Komponenten, die der Autor dafür unterteilt hat. Die spezifische Ausführungsform ist ein Projekt, das auf diesem Klassifizierungssystem Verzeichnisstruktur basiert .

Der Autor hat vor den Ordnernamen einige Pluszeichen und einige Minuszeichen hinzugefügt, was als meine eigene scheinbar seltsame Verzeichnisstrukturanordnung angesehen werden kann.

Die Erklärung lautet: Der äußerste +-Begriff stellt das Verzeichnis des gesamten Lazy-Loading-Moduls dar. Die Komponenten im Verzeichnis mit einem Pluszeichen stellen Seitenkomponenten dar, und diejenigen ohne Symbole stellen Layoutkomponenten dar. Die Komponente in Das Verzeichnis mit der Nummer stellt die Unit-Komponente dar. Die Unit-Komponente kann im gesamten Lazy-Loading-Modul verwendet werden, sie befindet sich also direkt auf der äußersten Ebene des Lazy-Loading-Verzeichnisses, während sich die Layout-Komponenten alle im Verzeichnis derselben Ebene befinden spezifische Seitenkomponente.

Die Zusammenfassung ist, dass die Verwendung von ng2-Komponenten technisch gesehen keine schwierige Erfahrung ist. Natürlich ist dies die aktuelle Erfahrung des Autors Die Erfahrung reicht immer noch nicht aus. Ich hoffe, dass ich in der zukünftigen Entwicklung tiefere Einblicke gewinnen kann, nachdem ich den NG2-Quellcode gründlich studiert habe.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert ein einheitliches Ein- und Ausblenden von Bildern

So konvertieren Sie Zahlen und Zeichenfolgen in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Entwicklung von Angular2-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!