Angular bietet einen Lebenszyklushaken ngOnInit
standardmäßig .
Warum sollte ngOnInit
verwendet werden, wenn wir bereits eine haben constructor
?
angular
typescript
ngoninit
Haseena PA
quelle
quelle
Antworten:
Dies
Constructor
ist eine Standardmethode der Klasse, die ausgeführt wird, wenn die Klasse instanziiert wird, und die ordnungsgemäße Initialisierung der Felder in der Klasse und ihren Unterklassen sicherstellt. Angular oder besser Dependency Injector (DI) analysiert die Konstruktorparameter undnew MyClass()
versucht beim Erstellen einer neuen Instanz durch Aufrufen , Anbieter zu finden, die den Typen der Konstruktorparameter entsprechen, löst sie auf und übergibt sie wie folgt an den KonstruktorngOnInit
ist ein Lebenszyklus-Hook, der von Angular aufgerufen wird, um anzuzeigen, dass Angular die Komponente erstellt hat.Wir müssen so importieren,
OnInit
um es zu verwenden (die tatsächliche ImplementierungOnInit
ist nicht obligatorisch, wird aber als gute Praxis angesehen):Um make von der Methode zu verwenden
OnInit
, müssen wir die Klasse folgendermaßen implementieren:Meistens verwenden wir
ngOnInit
für die gesamte Initialisierung / Deklaration und vermeiden, dass Dinge im Konstruktor funktionieren. Der Konstruktor sollte nur zum Initialisieren von Klassenmitgliedern verwendet werden, aber keine tatsächliche "Arbeit" ausführen.Sie sollten also
constructor()
Dependency Injection einrichten und nicht viel anderes. ngOnInit () ist der bessere Ort zum "Starten" - hier werden die Bindungen der Komponenten aufgelöst.Weitere Informationen finden Sie hier:
https://angular.io/api/core/OnInit
Winkelkomponentenkonstruktor gegen OnInit
quelle
tsconfig.json
Datei wie " true" wahr ist"strict": true
, müssen Sie die Klassenmitgliederconstructor
in "ngOnit
like" initialisierenFormGroup
.Der Artikel Der wesentliche Unterschied zwischen Konstruktor und ngOnInit in Angular untersucht den Unterschied aus mehreren Perspektiven. Diese Antwort enthält die wichtigste Erklärung für den Unterschied im Zusammenhang mit dem Initialisierungsprozess der Komponenten, die auch die unterschiedlichen Verwendungszwecke zeigt.
Der Angular Bootstrap-Prozess besteht aus zwei Hauptstufen:
Der Konstruktor der Komponente wird aufgerufen, wenn Angular den Komponentenbaum erstellt. Alle Lifecycle-Hooks werden als Teil der laufenden Änderungserkennung aufgerufen.
Wenn Angular einen Komponentenbaum erstellt, ist der Root-Modul-Injektor bereits konfiguriert, sodass Sie alle globalen Abhängigkeiten einfügen können. Wenn Angular eine untergeordnete Komponentenklasse instanziiert, ist der Injektor für die übergeordnete Komponente bereits eingerichtet, sodass Sie auf der übergeordneten Komponente definierte Anbieter einschließlich der übergeordneten Komponente selbst injizieren können. Komponentenkonstruktoren sind die einzige Methode, die im Kontext des Injektors aufgerufen wird. Wenn Sie also eine Abhängigkeit benötigen, ist dies der einzige Ort, an dem diese Abhängigkeiten abgerufen werden können.
Wenn Angular mit der Änderungserkennung beginnt, wird der Komponentenbaum erstellt und die Konstruktoren für alle Komponenten im Baum wurden aufgerufen. Außerdem werden die Vorlagenknoten jeder Komponente zum DOM hinzugefügt. Der
@Input
Kommunikationsmechanismus wird während der Änderungserkennung verarbeitet, sodass Sie nicht erwarten können, dass die Eigenschaften im Konstruktor verfügbar sind. Es wird am nach verfügbar seinngOnInit
.Sehen wir uns ein kurzes Beispiel an. Angenommen, Sie haben die folgende Vorlage:
Angular startet also das Bootstrapping der Anwendung. Wie gesagt, es werden zuerst Klassen für jede Komponente erstellt. Also nennt es
MyAppComponent
Konstruktor. Außerdem wird ein DOM-Knoten erstellt, der das Hostelement dermy-app
Komponente ist. Anschließend wird ein Hostelement für den Konstruktorchild-comp
und aufrufend erstelltChildComponent
. In dieser Phase geht es nicht wirklich um diei
Eingabebindung und etwaige Lebenszyklus-Hooks. Wenn dieser Vorgang abgeschlossen ist, erhält Angular den folgenden Baum von Komponentenansichten:Erst dann wird die Änderungserkennung ausgeführt und die Bindungen für die
my-app
undngOnInit
die MyAppComponent-Klasse aktualisiert. Anschließend werden die Bindungen für diechild-comp
undngOnInit
die ChildComponent-Klasse aktualisiert .Sie können Ihre Initialisierungslogik entweder im Konstruktor oder
ngOnInit
je nach Bedarf ausführen. Beispiel: Der Artikel Hier erfahren Sie, wie Sie ViewContainerRef abrufen, bevor die @ ViewChild-Abfrage ausgewertet wird. Sie zeigt, welche Art von Initialisierungslogik im Konstruktor ausgeführt werden muss.Hier sind einige Artikel, die Ihnen helfen, das Thema besser zu verstehen:
quelle
the constructor should only be used to inject dependencies
.Ich denke, das beste Beispiel wäre die Nutzung von Diensten. Angenommen, ich möchte Daten von meinem Server abrufen, wenn meine Komponente aktiviert wird. Angenommen, ich möchte einige zusätzliche Dinge an den Daten vornehmen, nachdem ich sie vom Server erhalten habe. Vielleicht erhalte ich eine Fehlermeldung und möchte sie anders protokollieren.
Mit ngOnInit ist es sehr einfach, einen Konstruktor zu verwenden. Außerdem wird die Anzahl der Rückrufebenen begrenzt, die ich meiner Anwendung hinzufügen muss.
Zum Beispiel:
Mit meinem Konstruktor könnte ich einfach meinen _userService aufrufen und meine Benutzerliste auffüllen, aber vielleicht möchte ich ein paar zusätzliche Dinge damit machen. Um sicherzustellen, dass alles in Großbuchstaben geschrieben ist, bin ich mir nicht ganz sicher, wie meine Daten durchkommen.
Dies erleichtert die Verwendung von ngOnInit erheblich.
Es macht es viel einfacher zu sehen, und so rufe ich meine Funktion einfach innerhalb meiner Komponente auf, wenn ich initialisiere, anstatt irgendwo anders danach suchen zu müssen. Es ist wirklich nur ein weiteres Tool, mit dem Sie das Lesen und Verwenden in Zukunft vereinfachen können. Außerdem finde ich es wirklich schlecht, Funktionsaufrufe in einen Konstruktor zu setzen!
quelle
getUsers
und fügen sie dann einngOnInit
? Ist es nicht weniger Code, ihn einfach in ngOnInit zu schreiben? Ich frage mich nur, warum die Leute das so machen. Ist es so, dass Sie den Code wiederverwenden können, wenn Sie es auch wollten? Vielen Dank.constructor
?constructor(private _userService: UserService){ this.getUsers(); };
OK, in erster Linie
ngOnInit
ist Teil des Angular - Lebenszyklus , während einconstructor
Teil ist ES6 JavaScript - Klasse, so dass der große Unterschied von hier beginnt! ...Schauen Sie sich das folgende Diagramm an, das den Lebenszyklus von Angular zeigt.
In Angular2 + erledigen wir
constructor
dasDI(Dependency Injection)
für uns, während es in Angular 1 durch Aufrufen der String-Methode und Überprüfen der eingefügten Abhängigkeit geschehen ist.Wie Sie im obigen Diagramm sehen,
ngOnInit
geschieht dies, nachdem der Konstruktor bereit ist, und wirdngOnChnages
ausgelöst, nachdem die Komponente für uns bereit ist. Alle Initialisierungen können in dieser Phase erfolgen. Ein einfaches Beispiel injiziert einen Dienst und initialisiert ihn bei init.OK, ich teile auch einen Beispielcode, damit Sie sehen können, wie wir ihn verwenden,
ngOnInit
undconstructor
im folgenden Code:quelle
Der erste (Konstruktor) bezieht sich auf die Klasseninstanziierung und hat nichts mit Angular2 zu tun. Ich meine, ein Konstruktor kann für jede Klasse verwendet werden. Sie können eine Initialisierungsverarbeitung für die neu erstellte Instanz eingeben.
Der zweite entspricht einem Lebenszyklus-Hook von Angular2-Komponenten:
Zitiert von der offiziellen Website von Angular:
Sie sollten also verwenden,
ngOnInit
wenn die Initialisierungsverarbeitung auf Bindungen der Komponente beruht (z. B. mit definierte Komponentenparameter@Input
), andernfalls würde der Konstruktor ausreichen ...quelle
Ich werde nur eine wichtige Sache hinzufügen , die in den obigen Ausführungen und erklärt wurde übersprungen , wenn Sie MÜSSEN verwenden
ngOnInit
.Wenn Sie das DOM der Komponente über ViewChildren , ContentChildren oder ElementRef bearbeiten , sind Ihre nativen Elemente während der Konstruktorphase nicht verfügbar.
Da
ngOnInit
dies jedoch geschieht, nachdem die Komponente erstellt und die Prüfungen (ngOnChanges
) aufgerufen wurden, können Sie an dieser Stelle auf das DOM zugreifen.quelle
@ViewChildren
insbesondere, müssen Sie die verwendenngAfterViewInit
Methode. Siehe hier: stackoverflow.com/questions/46314734/…Kurze und einfache Antwort wäre:
Constructor
:constructor
ist eindefault method
Lauf ( von taub ), wenn eine Komponente erstellt wird. Wenn Siean instance
eine Klasse erstellen , wird diese Zeit auchconstructor(default method)
aufgerufen. Mit anderen Worten, wenn eine Komponenteconstructed or/and an instance is created constructor(default method)
aufgerufen wird und der darin geschriebene relevante Code aufgerufen wird. Grundsätzlich und allgemeinAngular2
darin verwendet, um Dinge zu injizieren, wieservices
wenn Komponente für die weitere Verwendung konstruiert wird.OnInit
: ngOnInit ist der Lebenszyklus-Hook der Komponente, der zuerst danach ausgeführt wirdconstructor(default method)
wenn die Komponente initialisiert wird.Ihr Konstruktor wird also zuerst aufgerufen und Oninit wird später nach der Konstruktormethode aufgerufen.
boot.ts
Ressourcen: LifeCycle-Hook
Sie können diese kleine Demo überprüfen, die die Implementierung beider Dinge zeigt.
quelle
new MyClass()
ausgeführt wird. Ich finde es irreführend zu sagen, dass es bei Konstruktoren um Komponenten geht, um Klassen und um das Initialisieren von Instanzen dieser Klassen. Eine Komponente ist zufällig eine solche Klasse. Ansonsten denke ich, dass es eine gute Antwort ist.constructor
aufgerufen wird. Diese Antwort wurde jedoch im Winkel2-Kontext geschrieben. Um die beste Antwort zu erhalten, müssen Sie die Grundlagen der OOP kennen. Trotzdem werde ich die Antwort aktualisieren.Wie in vielen anderen Sprachen können Sie Variablen auf Klassenebene, im Konstruktor oder in einer Methode initialisieren. Es ist Sache des Entwicklers, zu entscheiden, was in seinem speziellen Fall am besten ist. Im Folgenden finden Sie eine Liste der Best Practices für die Entscheidung.
Variablen auf Klassenebene
Normalerweise deklarieren Sie hier alle Ihre Variablen, die im Rest Ihrer Komponente verwendet werden. Sie können sie initialisieren, wenn der Wert von nichts anderem abhängt, oder das Schlüsselwort const verwenden, um Konstanten zu erstellen, wenn sie sich nicht ändern.
Konstrukteur
Normalerweise empfiehlt es sich, im Konstruktor nichts zu tun und es nur für Klassen zu verwenden, die injiziert werden. Meistens sollte Ihr Konstruktor so aussehen:
Dadurch werden automatisch die Variablen auf Klassenebene erstellt, sodass Sie Zugriff darauf haben,
customService.myMethod()
ohne dies manuell tun zu müssen.NgOnInit
NgOnit ist ein Lifecycle-Hook, der vom Angular 2-Framework bereitgestellt wird. Ihre Komponente muss implementiert
OnInit
werden, um sie verwenden zu können. Dieser Lifecycle-Hook wird aufgerufen, nachdem der Konstruktor aufgerufen und alle Variablen initialisiert wurden. Der Großteil Ihrer Initialisierung sollte hier ablaufen. Sie haben die Gewissheit, dass Angular Ihre Komponente korrekt initialisiert hat, und können mit jeder Logik beginnen, die Sie benötigenOnInit
anstatt Dinge zu tun, wenn Ihre Komponente nicht ordnungsgemäß geladen wurde.Hier ist ein Bild, das die Reihenfolge der Aufrufe beschreibt:
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
TLDR
Wenn Sie das Angular 2-Framework verwenden und mit bestimmten Lebenszyklusereignissen interagieren müssen, verwenden Sie die vom Framework bereitgestellten Methoden, um Probleme zu vermeiden.
quelle
Um dies zu testen, habe ich diesen Code aus dem NativeScript-Tutorial geschrieben :
user.ts
login.component.ts
Konsolenausgabe
quelle
Der Hauptunterschied zwischen Konstruktor und
ngOnInit
besteht darin, dassngOnInit
es sich um einen Lebenszyklus-Hook handelt, der nach dem Konstruktor ausgeführt wird. Komponenteninterpolierte Vorlagen- und Eingabe-Anfangswerte sind im Konstruktor nicht verfügbar, aber inngOnInit
.Der praktische Unterschied besteht darin, wie sich dies
ngOnInit
auf die Struktur des Codes auswirkt. Der meiste Initialisierungscode kann verschoben werdenngOnInit
- solange dies keine Rennbedingungen schafft .Konstruktor-Antimuster
Eine beträchtliche Menge an Initialisierungscode macht es schwierig, die Konstruktormethode zu erweitern, zu lesen und zu testen.
Ein übliches Rezept für Initialisierungslogik aus Klassenkonstruktors trennt , ist es auf ein anderes Verfahren zu bewegen , wie
init
:ngOnInit
kann diesen Zweck in Komponenten und Richtlinien erfüllen:Abhängigkeitsspritze
Die Hauptaufgabe von Klassenkonstruktoren in Angular ist die Abhängigkeitsinjektion. Konstruktoren werden auch für DI-Annotationen in TypeScript verwendet. Fast alle Abhängigkeiten werden der Klasseninstanz als Eigenschaften zugewiesen.
Der durchschnittliche Komponenten- / Direktivenkonstruktor ist bereits groß genug, da er aufgrund von Abhängigkeiten eine mehrzeilige Signatur haben kann. Eine unnötige Intialisierungslogik für den Konstruktorkörper trägt zum Antimuster bei.
Asynchrone Initialisierung
Der Konstruktor für die asynchrone Initialisierung kann häufig als Antimuster betrachtet werden und riecht, da die Klasseninstanziierung vor der asynchronen Routine abgeschlossen wird und dies zu Race-Bedingungen führen kann. Wenn dies nicht der Fall ist
ngOnInit
und andere Lifecycle-Hooks dafür besser geeignet sind, insbesondere weil sie von derasync
Syntax profitieren können :Wenn Race-Bedingungen vorliegen (einschließlich derjenigen, bei denen eine Komponente bei einem Initialisierungsfehler nicht angezeigt werden sollte), sollte die asynchrone Initialisierungsroutine vor der Instanziierung der Komponente stattfinden und in die übergeordnete Komponente, den Router Guard usw. verschoben werden.
Unit Testing
ngOnInit
ist flexibler als ein Konstruktor und bietet einige Vorteile für Unit-Tests, die in dieser Antwort ausführlich erläutert werden .Da dies
ngOnInit
bei der Kompilierung von Komponenten in Komponententests nicht automatisch aufgerufen wird,ngOnInit
können aufgerufene Methoden nach der Instanziierung von Komponenten ausspioniert oder verspottet werden.In Ausnahmefällen
ngOnInit
kann vollständig gestoppt werden, um die Isolation für andere Komponenteneinheiten (z. B. einige Vorlagenlogik) zu gewährleisten.Erbe
Untergeordnete Klassen können Konstruktoren nur erweitern, nicht ersetzen.
Da
this
kann vorher nicht verwiesen werdensuper()
, schränkt dies die Priorität der Initialisierung ein.In Anbetracht der Tatsache, dass die Angular-Komponente oder -Richtlinie
ngOnInit
für die zeitunempfindliche Initialisierungslogik verwendet wird, können untergeordnete Klassen auswählen, obsuper.ngOnInit()
und wann aufgerufen wird:Dies wäre mit dem Konstruktor allein unmöglich zu implementieren.
quelle
Die obigen Antworten beantworten diesen Aspekt der ursprünglichen Frage nicht wirklich: Was ist ein Lebenszyklus-Hook? Ich habe eine Weile gebraucht, um zu verstehen, was das bedeutet, bis ich es so gesehen habe.
1) Angenommen, Ihre Komponente ist ein Mensch. Menschen haben ein Leben, das viele Lebensphasen umfasst, und dann verfallen wir.
2) Unsere menschliche Komponente könnte das folgende Lebenszyklus-Skript haben: Geboren, Baby, Grundschule, junger Erwachsener, Erwachsener mittleren Alters, älterer Erwachsener, tot, entsorgt.
3) Angenommen, Sie möchten eine Funktion zum Erstellen von Kindern haben. Um zu verhindern, dass dies kompliziert und ziemlich humorvoll wird, möchten Sie, dass Ihre Funktion nur in der Phase des jungen Erwachsenen im Leben der menschlichen Komponente aufgerufen wird. Sie entwickeln also eine Komponente, die nur aktiv ist, wenn sich die übergeordnete Komponente im Stadium für junge Erwachsene befindet. Hooks helfen Ihnen dabei, indem sie diesen Lebensabschnitt signalisieren und Ihre Komponente darauf einwirken lassen.
Lustige Sachen. Wenn Sie Ihrer Fantasie freien Lauf lassen, um so etwas tatsächlich zu codieren, wird es kompliziert und lustig.
quelle
Der Konstruktor ist eine Methode in JavaScript und wird als Merkmal der Klasse in es6 betrachtet. Wenn die Klasse instanziiert wird, wird der Konstruktor sofort ausgeführt, unabhängig davon, ob er im Angular-Framework verwendet wird oder nicht Kontrolle darüber.
Die "ConstructorTest" -Klasse wird unten instanziiert, ruft also intern den Konstruktor auf (all dies geschieht durch JavaScript (es6) no Angular).
Aus diesem Grund gibt es in Angular.ngOnInit einen ngOnInit- Lifecycle-Hook, wenn Angular die Initialisierung der Komponente abgeschlossen hat.
Zuerst instanziieren wir die Klasse wie folgt, die bei sofortigen Läufen der Konstruktormethode passiert.
ngOnInit wird bei Bedarf von Angular wie folgt aufgerufen:
Aber Sie fragen sich vielleicht, warum wir den Konstruktor in Angular verwenden?
Die Antwort lautet Abhängigkeitsinjektionen. Wie bereits erwähnt, ruft der Konstruktor die JavaScript-Engine sofort auf, wenn die Klasse instanziiert wird (bevor ngOnInit von Angular aufgerufen wird), sodass Typoskript uns hilft, den Typ der Abhängigkeiten zu ermitteln, die im Konstruktor definiert sind, und schließlich mitteilt Winkel, welche Art von Abhängigkeiten wir in dieser bestimmten Komponente verwenden möchten.
quelle
Zwei Dinge, die hier zu beachten sind:
Beide haben unterschiedliche Benutzerfreundlichkeit.
quelle
Konstrukteur() ist die Standardmethode im Komponentenlebenszyklus und wird für die Abhängigkeitsinjektion verwendet. Der Konstruktor ist eine Typoskript-Funktion.
ngOnInit () wird nach dem Konstruktor und ngOnInit nach den ersten ngOnChanges aufgerufen.
dh:
Konstruktor () -->ngOnChanges ()--> ngOnInit ()
Wie oben erwähnt,
ngOnChanges()
wird aufgerufen, wenn sich ein Eingabe- oder Ausgabebindungswert ändert.quelle
Beide Methoden haben unterschiedliche Ziele / Verantwortlichkeiten. Die Aufgabe des Konstruktors (eine sprachunterstützte Funktion) besteht darin, sicherzustellen, dass die Repräsentationsinvariante gültig ist. Andernfalls wird angegeben, um sicherzustellen, dass die Instanz gültig ist, indem den Mitgliedern korrekte Werte zugewiesen werden. Es ist Sache des Entwicklers, zu entscheiden, was "richtig" bedeutet.
Die Aufgabe der onInit () -Methode (die ein Winkelkonzept ist) besteht darin, Methodenaufrufe für ein korrektes Objekt zuzulassen (Repräsentationsinvariante). Jede Methode sollte wiederum sicherstellen, dass die Repräsentationsinvariante gilt, wenn die Methode beendet wird.
Der Konstruktor sollte verwendet werden, um 'korrekte' Objekte zu erstellen. Die onInit-Methode bietet Ihnen die Möglichkeit, Methodenaufrufe an einer genau definierten Instanz aufzurufen.
quelle
Konstrukteur: Die Konstruktormethode für eine ES6-Klasse (oder in diesem Fall TypeScript) ist ein Feature einer Klasse selbst und kein Angular-Feature. Es liegt außerhalb der Kontrolle von Angular, wenn der Konstruktor aufgerufen wird. Dies bedeutet, dass es kein geeigneter Hook ist, um Sie darüber zu informieren, wenn Angular die Initialisierung der Komponente abgeschlossen hat. Die JavaScript-Engine ruft den Konstruktor auf, nicht Angular direkt. Aus diesem Grund wurde der Lebenszyklus-Hook ngOnInit (und $ onInit in AngularJS) erstellt. Vor diesem Hintergrund gibt es ein geeignetes Szenario für die Verwendung des Konstruktors. In diesem Fall möchten wir die Abhängigkeitsinjektion verwenden - im Wesentlichen zum „Verdrahten“ von Abhängigkeiten in die Komponente.
Da der Konstruktor von der JavaScript-Engine initialisiert wird und TypeScript es uns ermöglicht, Angular mitzuteilen, welche Abhängigkeiten erforderlich sind, um einer bestimmten Eigenschaft zugeordnet zu werden.
ngOnInit dient lediglich dazu, uns zu signalisieren, dass Angular die Initialisierung der Komponente abgeschlossen hat.
Diese Phase umfasst den ersten Durchgang bei der Änderungserkennung für die Eigenschaften, die wir möglicherweise an die Komponente selbst binden, z. B. mithilfe eines @ Input () -Dekorators.
Aus diesem Grund sind die Eigenschaften von @Input () in ngOnInit verfügbar, im Konstruktor jedoch nicht definiert
quelle
Der Konstruktor ist der erste, und es kommt manchmal vor, wenn die @ Eingabedaten null sind! Daher verwenden wir den Konstruktor, um Dienste zu deklarieren, und ngOnInit erfolgt danach. Beispiel für einen Kontrahenten:
Beispiel für onInit:
Ich denke, dass onInit wie InitialComponents () in winForm ist.
quelle
In den Winkellebenszyklen
1) Winkelinjektor erkennt Konstruktorparameter und instanziiert Klasse.
2) Nächster Winkelanruf-Lebenszyklus
Angular Lifecycle Hooks
ngOnChanges -> Aufruf der Direktivenparameterbindung.
ngOnInit -> Winkel-Rendering starten ...
Rufen Sie eine andere Methode mit dem Zustand des Winkellebenszyklus auf.
quelle
Das
constructor
wird aufgerufen, wenn Angular die Komponente "instanziiert / konstruiert". DiengOnInit
Methode ist ein Hook, der den Initialisierungsteil des Komponentenlebenszyklus darstellt. Es wird empfohlen, es nur für die Service-Injektion zu verwenden :Selbst wenn es möglich ist, sollten Sie keine "Arbeit" im Inneren erledigen. Wenn Sie eine Aktion starten möchten, die bei der "Initialisierung" der Komponente ausgeführt werden muss, verwenden Sie
ngOnInit
:Darüber hinaus können Aktionen mit Eingabeeigenschaften , die von einer übergeordneten Komponente stammen, im Konstruktor nicht ausgeführt werden. Sie sollten in
ngOnInit
Methode oder einem anderen Haken platziert werden. Dies gilt auch für Elemente, die sich auf die Ansicht beziehen (das DOM), z. B. viewchild-Elemente :quelle
constructor()
wird verwendet, um die Abhängigkeitsinjektion durchzuführen.ngOnInit()
,ngOnChanges()
UndngOnDestroy()
usw. sind Lifecycle - Methoden.ngOnChanges()
wird als erster aufgerufen, bevor sichngOnInit()
der Wert einer gebundenen Eigenschaft ändert, wird er NICHT aufgerufen, wenn keine Änderung vorliegt.ngOnDestroy()
wird aufgerufen, wenn die Komponente entfernt wird. Um es zu verwenden,OnDestroy
muss esimplement
von der Klasse bearbeitet werden.quelle
Ich fand die Antwort und versuchte sie ins Englische zu übersetzen: Diese Frage stellte sich auch in technischen Interviews noch. Tatsächlich gibt es eine große Ähnlichkeit zwischen den beiden, aber es gibt auch einige Unterschiede.
Der Konstruktor ist Teil von ECMAScript. Andererseits ist ngOnInit () ein Winkelbegriff.
Wir können die Konstruktoren in allen Klassen aufrufen, auch wenn wir Angular nicht verwenden
Lebenszyklus: Der Konstruktor wird vor ngOnInt () aufgerufen.
Im Konstruktor können wir keine HTML-Elemente aufrufen. In ngOnInit () können wir dies jedoch.
Im Allgemeinen Aufrufe von Diensten in ngOnInit () und nicht im Konstruktor
Quelle: http://www.angular-tuto.com/Angular/Component#Diff
quelle
Konstrukteur
Die Konstruktorfunktion wird mit jeder Klasse geliefert. Konstruktoren sind nicht spezifisch für Angular, sondern Konzepte, die aus objektorientierten Entwürfen abgeleitet wurden. Der Konstruktor erstellt eine Instanz der Komponentenklasse.
OnInit
Die
ngOnInit
Funktion ist eine der Lebenszyklusmethoden einer Angular-Komponente. Mit Lebenszyklusmethoden (oder Hooks) in Angular-Komponenten können Sie einen Code in verschiedenen Phasen der Lebensdauer einer Komponente ausführen. Im Gegensatz zur KonstruktormethodengOnInit
stammt die Methode von einer Angular-Schnittstelle (OnInit
), die die Komponente implementieren muss, um diese Methode verwenden zu können. DiengOnInit
Methode wird kurz nach dem Erstellen der Komponente aufgerufen.quelle
Der Konstruktor wird ausgeführt, wenn die Klasse instanziiert wird. Es hat nichts mit dem Winkel zu tun. Es ist die Funktion von Javascript und Angular hat keine Kontrolle darüber
Das ngOnInit ist Angular-spezifisch und wird aufgerufen, wenn das Angular die Komponente mit all ihren Eingabeeigenschaften initialisiert hat
Die @ Input-Eigenschaften sind unter dem ngOnInit-Lifecycle-Hook verfügbar. Auf diese Weise können Sie einige Initialisierungsaufgaben erledigen, z. B. Daten vom Back-End-Server usw. in der Ansicht anzeigen
@ Input-Eigenschaften werden im Konstruktor als undefiniert angezeigt
quelle
Der Konstruktor ist eine Funktion, die ausgeführt wird, wenn eine Komponente (oder eine andere Klasse) erstellt wird.
ngOnInit ist eine Funktion, die zu einer Gruppen-Lebenszyklus-Methodengruppe gehört und in einem anderen Moment unserer Komponente ausgeführt wird (daher Name Life-Cycle). Hier ist eine Liste von allen:
Der Konstruktor wird vor jeder Lebenszyklusfunktion ausgeführt.
quelle