Dieser Artikel wird Ihnen einige Interviewfragen basierend auf Angular8+ mitteilen und Ihnen ein detailliertes Verständnis der grundlegenden Wissenspunkte von Angular8+ vermitteln. Ich hoffe, dass er Ihnen hilfreich sein wird! 🎙 um die Effizienz zu verbessern. Angular-Apps, Komponenten, Dienste usw. können einfach generiert und über Parameter entsprechend Ihren eigenen Anforderungen erstellt werden. Man kann sagen, dass es ein unverzichtbares Werkzeug für die Winkelentwicklung ist. [Verwandte Tutorial-Empfehlungen: „
angular Tutorial“] Referenz: https://cli.angular.io/
ng-Update: Angular selbst und seine Abhängigkeiten aktualisieren ng-Version: Zeigt die globale Version von Angular CLI und lokale Versionen von Angular CLI, Angular-Code usw. an.ng generieren: Neue Komponenten, Dienste, Pipes, Klassen usw. erstellen. ng neu: Neu erstellen Angular-App
ng-Hinzufügen: Fügen Sie eine neue Bibliothek eines Drittanbieters hinzu . Es wird zwei Dinge tun: 1) node_modules basierend auf npm installieren, 2) die Konfigurationsdatei automatisch ändern, um sicherzustellen, dass neue Abhängigkeiten ordnungsgemäß funktionieren Implementierung Anwendungsdesignmuster sind eines der Kernkonzepte von Angular.
Eine Abhängigkeit ist ein Dienst mit einer Reihe von Funktionen. Verschiedene Komponenten und Anweisungen (Derivate) in der Anwendung können die Funktionen des Dienstes erfordern. Angular bietet einen reibungslosen Mechanismus, mit dem wir diese Abhängigkeiten in unsere Komponenten und Anweisungen einfügen können. Wir bauen also lediglich Abhängigkeiten auf, die zwischen allen Komponenten der Anwendung eingefügt werden können.
Angular bietet zwei Arten der Kompilierung:
JIT-Kompilierung (Just-in-Time) AOT-Kompilierung (Ahead-of-Time)Der AOT-Compiler fügt HTML und Vorlagen zu JS-Dateien hinzu, bevor er sie im Browser ausführt. Daher müssen keine redundanten HTML-Dateien gelesen werden, was die Sicherheit der Anwendung erhöht.
Winkel-Zwei-Wege-Bindung
Winkel-Zwei-Wege-Bindung wird durch Dirty-Data-Check (Dirty-Check) implementiert.
Angular-Zwei-Wege-BindungseffizienzproblemIn Situationen, in denen extrem viele DOM-Elemente (Hunderte oder Tausende) auf der Seite gebunden werden müssen, treten zwangsläufig Effizienzprobleme auf. (Die Einzelheiten hängen auch von der PC- und Browserleistung ab). Wenn die Dirty-Prüfung außerdem mehr als 10 Mal durchgeführt wird (Erfahrungswert?), wird davon ausgegangen, dass ein Problem mit dem Programm vorliegt, und es werden keine weiteren Prüfungen durchgeführt.
Sie können dies auf folgende Weise vermeiden:Der Datenfluss von Angular erfolgt von oben nach unten und fließt in eine Richtung von den übergeordneten Komponenten zu den untergeordneten Komponenten. Der unidirektionale Datenfluss gewährleistet eine effiziente und vorhersehbare Änderungserkennung. Daher ist die Komponentisierung auch ein Mittel zur Leistungssteigerung.
Schreiben Sie weniger komplexe Logik in Ausdrücke (und von durch Ausdrücke aufgerufenen Funktionen)
Verbinden Sie keine zu langen Pipes (oft durchläuft die Pipe neue Arrays und generiert sie, Pipe in AnglarJS (v1) (Filter genannt)
Änderungserkennungsstrategie onPush verfügt über zwei Änderungserkennungsstrategien. Standard ist die Standardstrategie zur Änderungserkennung von Angular, bei der es sich um die oben erwähnte Dirty-Prüfung handelt (überprüfen Sie alle Werte, solange sie sich ändern). Entwickler können basierend auf dem Szenario eine effizientere Methode zur Änderungserkennung einrichten: onPush. Die onPush-Strategie bedeutet, dass die Komponente nur dann eine Änderungserkennung durchführt, wenn sich der Verweis auf die Eingabedaten ändert oder ein Ereignis ausgelöst wird.
NgFor sollte zusammen mit der trackBy-Gleichung verwendet werden. Andernfalls aktualisiert NgFor das DOM für jedes Element in der Liste während jedes Erkennungsprozesses für fehlerhafte Werte.
<div> <span>Name {{item.name}}</span> <!-- 1. 直接绑定 --> <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式--> <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 --> </div>
Direkte Bindung: In den meisten Fällen ist dies die beste Methode.
Das Ergebnis des Bindungsmethodenaufrufs: Während jedes Dirty-Value-Erkennungsprozesses muss die Klassengleichung einmal aufgerufen werden. Wenn keine besonderen Bedürfnisse bestehen, sollte diese Verwendungsart weitestgehend vermieden werden.
Pipe-Methode: Sie ähnelt der Bindungsfunktion und die Klasse „Pipe“ zur Erkennung schmutziger Werte wird jedes Mal aufgerufen. Allerdings hat Angular die Pipe optimiert und Caching hinzugefügt. Wenn das Element beim letzten Mal gleich ist, wird das Ergebnis direkt zurückgegeben.
Weitere Optimierungstipps finden Sie in den Tipps zur Leistungsoptimierung zur Winkelbindung (Dirty Checking)
Was ist das Modul von Angular?
Modul (Modul) ist ein Modul, mit dem wir Komponenten, Dienste und Rohre gruppieren können. Module entscheiden, ob andere Module Komponenten, Anweisungen usw. verwenden können, indem sie diese Elemente exportieren oder ausblenden. Jedes Modul wird mit dem @NgModule-Dekorator definiert.
Der Unterschied zwischen Root-Modul und Feature-Modul.
Jede Angular-Anwendung kann nur ein Root-Modul (Root-Modul) und ein oder mehrere Feature-Module (Feature-Modul) haben. Das Root-Modul importiert BrowserModule, während das Funktionsmodul CommonModule importiert.
Lazy-Loading von Modulen
Um die Ladegeschwindigkeit des ersten Bildschirms zu verbessern, können Sie Lazy-Loading verwenden, um nur dann zu laden, wenn auf bestimmte spezifische URLs zugegriffen wird nicht häufig verwendet.
Implementierung: Funktionsmodul normal erstellen und Routing-Konfiguration ändern. Beispiel:
const routes: Routes = [ { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) } ];
Auf diese Weise ist dieses Funktionsmodul nach der Kompilierung ein unabhängiges JS. Nur wenn der Benutzer auf die URL (~/customers) zugreift, wird dieses unabhängige JS vom Server angefordert und dann geladen und ausgeführt .
Siehe https://angular.io/guide/lazy-loading-ngmodules
Direktive wird verwendet, um einem vorhandenen Element (DOM) oder einer Komponente (Component) Verhalten hinzuzufügen.
Gleichzeitig können mehrere Anweisungen auf ein Element oder eine Komponente angewendet werden.
Erstens empfiehlt die neue Version von anuglar die Verwendung von Observable (gehört zu RxJS). Zweitens können Sie für Observable-Objekte .toPromise() verwenden, um sie in Promise-Objekte umzuwandeln.
Versprochen, ob dann aufgerufen wird oder nicht. Versprechen werden sofort ausgeführt; Observablen werden nur erstellt und ausgeführt, wenn sie aufgerufen werden (abonnieren).
Promise gibt einen Wert zurück; Observable gibt 0 bis N Werte zurück. Der Operator, der Promise entspricht, ist also .then(), und der entsprechende Operator für Observable ist .subscribe
Wenn Sie die Leistung von Angular verbessern möchten
Stellen Sie sicher, dass nicht verwendete Bibliotheken von Drittanbietern aus der Anwendung entfernt wurden. Das Gleiche wie oben.
Das obige ist der detaillierte Inhalt vonZusammenstellung von Angular8+-Interviewfragen: Analyse grundlegender Wissenspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!