Artykuł zasadnicza różnica między konstruktorem a ngoninitem w kątach bada różnicę z wielu perspektyw. Ta odpowiedź zapewnia najważniejsze wyjaśnienie różnicy związane z procesem inicjalizacji komponentu, który również pokazuje różne w użyciu.

• konstruowanie drzewa komponentów
• uruchamianie wykrywania zmian

Konstruktor komponent jest wywoływany, gdy kątowe konstruuje drzewo komponentów. Wszystkie Hooki cyklu życia są wywoływane jako część wykrywania zmian.

Gdy Angular konstruuje drzewo komponentów, moduł root injector jest już skonfigurowany, dzięki czemu można wprowadzić dowolne globalne zależności. Ponadto, gdy Angular tworzy instancję klasy komponentu potomnego, wtryskiwacz dla komponentu macierzystego jest również już skonfigurowany, dzięki czemu można wstrzykiwać dostawców zdefiniowanych na komponencie macierzystym, w tym sam komponent macierzysty. Konstruktory komponentów są jedyną metodą, która jest wywoływana w kontekście wtryskiwacza, więc jeśli potrzebujesz jakiejkolwiek zależności, To jest to jedyne miejsce, aby uzyskać te zależności.

Gdy wykrywanie zmian kątowych rozpoczyna się, drzewo komponentów jest konstruowane i wywoływane są konstruktory dla wszystkich komponentów w drzewie. Również węzły szablonów każdego komponentu są dodawane do DOM. Mechanizm komunikacji @Input jest przetwarzany podczas wykrywania zmian, więc nie można oczekiwać, że właściwości dostępne w konstruktorze. Będzie on dostępny po ngOnInit.

Zobaczmy szybki przykład. Załóżmy, że masz następujący szablon:

<my-app>
   <child-comp [i]='prop'>

Więc Angular rozpoczyna bootstrapowanie aplikacji. Jak powiedziałem, najpierw tworzy klasy dla każdego komponentu. Więc nazywa MyAppComponent konstruktorem. Tworzy również węzeł DOM, który jest elementem hosta my-app komponentu. Następnie następuje utworzenie elementu hosta dla konstruktora child-comp i wywołanie konstruktora ChildComponent. Na tym etapie nie jest to tak naprawdę dotyczy wiązania wejściowego i i wszelkich haków cyklu życia. Tak więc po zakończeniu tego procesu kątowe kończy się następującym drzewem widoków komponentów:

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data  

Tylko wtedy uruchamia wykrywanie zmian i aktualizuje powiązania dla my-app i wywołuje ngOnInit w klasie MyAppComponent. Następnie przechodzi do aktualizacji wiązań dla child-comp i wywołuje ngOnInit Na klasie ChildComponent.

Możesz wykonać logikę inicjalizacji w konstruktorze lub ngOnInit w zależności od tego, czego potrzebujesz dostępny. Na przykład Artykuł tutaj jest jak uzyskać viewcontainerref przed ewaluacją zapytania @ViewChild pokazuje jaki typ logiki inicjalizacji może być wymagany do wykonania w konstruktorze.

Oto kilka artykułów, które pomogą Ci lepiej zrozumieć temat:

• Wszystko, co musisz wiedzieć o wykrywaniu zmian w kątach
• W przeciwieństwie do poprzednich części gry, gra nie jest dostępna.]}
• na aktualizacja mechaniki wiązań własności w kątach

Myślę, że najlepszym przykładem byłoby korzystanie z usług. Załóżmy, że chcę pobrać dane z serwera, gdy mój komponent zostanie "aktywowany". Powiedzmy, że chcę również zrobić kilka dodatkowych rzeczy do danych po otrzymaniu ich z serwera, może dostanę błąd i chcę je inaczej logować.

To jest naprawdę łatwe z ngOnInit nad konstruktorem, to również ogranicza ile warstw callback muszę dodać do mojej aplikacji.

Na Przykład:

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

Z moim konstruktorem I mogę po prostu zadzwonić do my _userService i wypełnić moją listę user_list, ale może chcę zrobić z nią kilka dodatkowych rzeczy. Jak upewnić się, że wszystko jest upper_case, nie jestem całkowicie pewien, jak moje dane przechodzą.

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

To sprawia, że jest to znacznie łatwiejsze do zobaczenia, więc po prostu wywołuję swoją funkcję w moim komponencie, kiedy inicjalizuję, zamiast kopać ją gdzie indziej. Naprawdę to tylko kolejne narzędzie, którego możesz użyć, aby ułatwić czytanie i używać w przyszłości. Również uważam, że to naprawdę zła praktyka, aby umieścić wywołania funkcji w konstruktorze!

OK, Po pierwsze ngOnInit jest częścią Angular lifecycle , podczas gdy constructor jest częścią ES6 JavaScript class, więc główna różnica zaczyna się właśnie tutaj!...

Spójrz na poniższy wykres, który stworzyłem, który pokazuje cykl życia kątowego.

W Angular2+ używamy constructor do wykonania DI(Dependency Injection) dla nas, podczas gdy w Angular1 działo się to poprzez wywołanie metody String i sprawdzenie, która zależność została wstrzyknięta.

Jako widzisz na powyższym diagramie, ngOnInit dzieje się po tym, jak konstruktor jest gotowy i {[6] } i zostanie uruchomiony po tym, jak komponent jest gotowy dla nas. Cała inicjalizacja może się zdarzyć na tym etapie, prosta próbka wstrzykuje usługę i inicjuje ją na init.

Ok, udostępniam również przykładowy kod, aby sprawdzić, jak wykorzystamy ngOnInit i constructor w poniższym kodzie:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor

  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}

Pierwszy (konstruktor) jest związany z instancją klasy i nie ma nic wspólnego z Angular2. Chodzi mi o to, że konstruktor może być używany na każdej klasie. Możesz umieścić w nim pewne przetwarzanie inicjalizacji dla nowo utworzonej instancji.

Drugi odpowiada hakowi cyklu życia elementów Kątowych2:

Cytat z oficjalnej strony angular:

• ngOnChanges jest wywoływane, gdy zmienia się wartość wiązania wejściowego lub wyjściowego
• ngOnInit nazywa się po pierwszy ngOnChanges

Więc powinieneś użyć ngOnInit jeśli przetwarzanie inicjalizacji opiera się na powiązaniach komponentu (na przykład parametry komponentu zdefiniowane za pomocą @Input), w przeciwnym razie konstruktor byłby wystarczający...

Dodam tylko jedną ważną rzecz, która została pominięta w wyjaśnieniach powyżej i wyjaśnia, Kiedy musisz użyć ngOnInit.

Jeśli robisz jakąś manipulację Dom komponentu poprzez np. ViewChildren, ContentChildren lub ElementRef, twoje rodzime elementy nie będą dostępne w fazie konstruktora.

Jednakże, ponieważ ngOnInit dzieje się po utworzeniu komponentu i wywołaniu checks (ngOnChanges), możesz uzyskać dostęp do DOM w tym momencie.

export class App implements OnInit, AfterViewInit, AfterContentInit {
  @Input() myInput: string;
  @ViewChild() myTemplate: TemplateRef<any>;
  @ContentChild(ChildComponent) myComponent: ChildComponent; 

  constructor(private elementRef: ElementRef) {
     // this.elementRef.nativeElement is undefined here
     // this.myInput is undefined here
     // this.myTemplate is undefined here
     // this.myComponent is undefine here
  }

  ngOnInit() {
     // this.elementRef.nativeElement can be used from here on
     // value of this.myInput is passed from parent scope
     // this.myTemplate and this.myComponent are still undefined
  }
  ngAfterContentInit() {
     // this.myComponent now gets projected in and can be accessed
     // this.myTemplate is still undefined
  }

  ngAfterViewInit() {
     // this.myTemplate can be used now as well
  }
}

krótka i prosta odpowiedź brzmiałaby:

Constructor : constructor jest default method runs ( domyślnie ) gdy komponent jest konstruowany. Kiedy tworzysz an instance klasy, to również constructor(default method) będzie wywoływany. Innymi słowy, gdy komponent jest wywołany constructed or/and an instance is created constructor(default method), A odpowiedni kod jest napisany wewnątrz jest wywoływany. Zasadniczo i ogólnie w Angular2, używany do wstrzykiwania rzeczy takich jak services, gdy komponent jest konstruowany do dalszego użyj.

OnInit: ngOnInit jest Hookiem cyklu życia komponentu, który uruchamia się najpierw po constructor(default method), gdy komponent jest inicjowany.

Tak więc twój konstruktor zostanie wywołany jako pierwszy, a Oninit zostanie wywołany później po metodzie constructor.

But.ts

import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';

export class app implements OnInit{
   constructor(myService:ExternalService)
   {
           this.myService=myService;
   }

   ngOnInit(){
     // this.myService.someMethod() 
   }
}

Zasoby: hak LifeCycle

Możesz to sprawdzić małe demo co pokazuje realizację obu rzeczy.

Podobnie jak wiele innych języków, możesz inicjalizować zmienne na poziomie klasy, konstruktora lub metody. To do dewelopera należy decyzja, co jest najlepsze w ich konkretnym przypadku. Ale poniżej znajduje się lista najlepszych praktyk, jeśli chodzi o podejmowanie decyzji.

Zmienne poziomu klasy

Zazwyczaj deklarujesz tutaj wszystkie swoje zmienne, które będą używane w pozostałej części komponentu. Możesz je zainicjować, jeśli wartość nie zależy od niczego innego, lub użyć słowa kluczowego const, aby Utwórz stałe, jeśli nie ulegną zmianie.

export class TestClass{
    let varA: string = "hello";
}

Konstruktor

Zwykle najlepszą praktyką jest nie robić niczego w konstruktorze i używać go dla klas, które zostaną wstrzyknięte. Przez większość czasu twój konstruktor powinien wyglądać tak:

   constructor(private http: Http, private customService: CustomService) {}

Spowoduje to automatyczne utworzenie zmiennych poziomu klasy, więc będziesz miał dostęp do customService.myMethod() bez konieczności wykonywania tego ręcznie.

NgOnInit

NgOnit jest hakiem cyklu życia zapewnianym przez ramę kątową 2. Twój komponent musi zaimplementować OnInit, aby z niego korzystać. Ten hook cyklu życia jest wywoływany po wywołaniu konstruktora i zainicjowaniu wszystkich zmiennych. Większość twojej inicjalizacji powinna iść tutaj. Będziesz mieć pewność, że Angular poprawnie zainicjował Twój komponent i możesz zacząć robić dowolną logikę, której potrzebujesz w OnInit, a nie robić rzeczy, gdy twój komponent nie zakończył prawidłowego ładowania.

Oto obraz opisujący kolejność tego, co dostaje "nazwa": {]}

Https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

TLDR

Jeśli używasz frameworka Angular 2 i potrzebujesz interakcji z pewnymi zdarzeniami cyklu życia, użyj metod dostarczonych przez framework, aby uniknąć problemów.

Główna różnica między konstruktorem a ngOnInit polega na tym, że ngOnInit jest lifecycle hook i biegnie za konstruktorem. Komponent interpolowany szablon i początkowe wartości wejściowe nie są dostępne w konstruktorze, ale są dostępne w ngOnInit.

Praktyczna różnica polega na tym, jak ngOnInit wpływa na strukturę kodu. Większość kodu inicjalizacyjnego można przenieść do ngOnInit - dopóki nie stworzy to Warunków rasowych .

Konstruktor antypattern

Znaczna ilość kodu inicjalizacyjnego sprawia, że metoda konstruktora jest trudna do rozszerzenia, odczytania i przetestowania.

Zwyczajową receptą na oddzielenie logiki inicjalizacji od konstruktora klasy jest przeniesienie jej do innej metody, takiej jak init:

class Some {
  constructor() {
    this.init();
  }

  init() {...}
}

ngOnInit może służyć temu celowi w składnikach i dyrektywach:

constructor(
  public foo: Foo,
  /* verbose list of dependencies */
) {
  // time-sensitive initialization code
  this.bar = foo.getBar();
}

ngOnInit() {
  // rest of initialization code
}

Dependency injection

Podstawową rolą konstruktorów klas w Angular jest Wtrysk zależności. Konstruktory są również używane do DI adnotacja w maszynopisie. Prawie wszystkie zależności są przypisane jako właściwości do instancji klasy.

Średni konstruktor komponentu/dyrektywy jest już wystarczająco duży, ponieważ może mieć wielowierszową sygnaturę ze względu na zależności, umieszczając niepotrzebną logikę intializacji w ciele konstruktora.

Inicjalizacja asynchroniczna

Asynchroniczny konstruktor inicjalizacji może być często uważany za antypattern i ma zapach, ponieważ instancja klasy kończy się przed asynchroniczną rutyną, a to może stworzyć warunki wyścigu. Jeśli tak nie jest, ngOnInit i inne Hooki cyklu życia są do tego lepszym miejscem, szczególnie dlatego, że mogą korzystać ze składni async:

constructor(
  public foo: Foo,
  public errorHandler: ErrorHandler
) {}

async ngOnInit() {
  try {
    await this.foo.getBar();
    await this.foo.getBazThatDependsOnBar();
  } catch (err) {
    this.errorHandler.handleError(err);
  }
}

Jeśli istnieją warunki rasowe (w tym takie, że komponent nie powinien pojawić się przy błędzie inicjalizacji), procedura inicjalizacji asynchronicznej powinna mieć miejsce przed instancją komponentu i zostać przeniesiona do komponentu nadrzędnego, Router guard, itd.

Testy jednostkowe

ngOnInit jest bardziej elastyczny niż konstruktor i zapewnia pewne korzyści dla testów jednostkowych, które są szczegółowo wyjaśnione w ta odpowiedź.

Biorąc pod uwagę, że ngOnInit nie jest wywoływana automatycznie podczas kompilacji komponentów w testach jednostkowych, metody wywołane w ngOnInit mogą być szpiegowane lub wyśmiewane po utworzeniu instancji komponentów.

W wyjątkowych przypadkach ngOnInit może być całkowicie zasypany, aby zapewnić izolację dla innych jednostek składowych (dla przykład, jakaś logika szablonu).

Dziedziczenie

Klasy podrzędne mogą tylko rozszerzać konstruktory, a nie zastępować je.

Ponieważ this nie może być odwołany przed super(), nakłada to ograniczenia na pierwszeństwo inicjalizacji.

Biorąc pod uwagę, że element kątowy lub dyrektywa używa ngOnInit do niewrażliwej na czas logiki inicjalizacji, klasy podrzędne mogą wybrać, czy super.ngOnInit() jest wywoływana i kiedy:

ngOnInit() {
  this.someMethod();
  super.ngOnInit();
}

Nie da się tego zaimplementować za pomocą konstruktora sam.

Aby to przetestować, napisałem ten kod, zapożyczony z NativeScript Tutorial :

Użytkownik.ts

export class User {
    email: string;
    password: string;
    lastLogin: Date;

    constructor(msg:string) {        
        this.email = "";
        this.password = "";
        this.lastLogin = new Date();
        console.log("*** User class constructor " + msg + " ***");
    }

    Login() {
    }
}

Login.komponent.ts

import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"

@Component({
  selector: "login-component",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {

  user: User = new User("property");  // ONE
  isLoggingIn:boolean;

  constructor() {    
    this.user = new User("constructor");   // TWO
    console.log("*** Login Component Constructor ***");
  }

  ngOnInit() {
    this.user = new User("ngOnInit");   // THREE
    this.user.Login();
    this.isLoggingIn = true;
    console.log("*** Login Component ngOnInit ***");
  }

  submit() {
    alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
  }

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
  }

}

Wyjście konsoli

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***  

Powyższe odpowiedzi tak naprawdę nie odpowiadają na ten aspekt pierwotnego pytania: Co to jest haczyk cyklu życia? Zajęło mi trochę czasu zrozumienie, co to znaczy, dopóki nie pomyślałem o tym w ten sposób.

1) Powiedz, że Twój składnik jest człowiekiem. Ludzie mają życie, które obejmuje wiele etapów życia, a następnie wygasają.

2) nasz Składnik ludzki może mieć następujący scenariusz cyklu życia: urodzony, Dziecko, Szkoła Podstawowa, młody dorosły, średni wiek dorosły, starszy dorosły, martwy, usunięty.

3) powiedz chcesz mieć funkcję tworzenia dzieci. Aby to nie stało się skomplikowane i dość zabawne, chcesz, aby Twoja funkcja była wywoływana tylko w młodym dorosłym etapie życia ludzkiego. Tak więc tworzysz komponent, który jest aktywny tylko wtedy, gdy komponent macierzysty znajduje się w fazie młodej osoby dorosłej. Hooki pomagają ci to zrobić, sygnalizując ten etap życia i pozwalając komponentowi działać na nim.

Fajne rzeczy. Jeśli pozwolisz swojej wyobraźni iść do rzeczywiście kodowania coś takiego to się komplikuje i jest zabawne.

Dwie rzeczy do zaobserwowania tutaj:

1. Konstruktor jest wywoływany za każdym razem, gdy tworzony jest obiekt tej klasy.
2. ngOnInit wywołany po utworzeniu komponentu.

Oba mają inną użyteczność.

The konstruktor jest metodą w JavaScript i jest uważana za cechę klasy w es6 .Gdy klasa jest instancjowana, natychmiast uruchamia konstruktor, niezależnie od tego, czy jest używana w frameworku Angular, czy not.So jest wywoływany przez silnik JavaScript i Angular nie ma nad tym kontroli.

import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {

//This is called by Javascript not the Angular.
     constructor(){
        console.log("view constructor initialised");
     }
}

Klasa "ConstructorTest" jest instancjowana poniżej,więc wewnętrznie wywołuje konstruktor (wszystko to dzieje się przy pomocy JavaScript (es6) no Angular).

new CONSTRUCTORTEST();

Dlatego jest ngOnInit hak ratunkowy w kształcie kąta.ngOnInit renderuje po zakończeniu inicjalizacji komponentu przez Angular.

import {Component} from '@angular/core';
@Component({})
class NGONINITTEST implements onInit{
   constructor(){}
   //ngOnInit calls by Angular
   ngOnInit(){
     console.log("Testing ngOnInit");
   }
}

Najpierw tworzymy instancję klasy jak poniżej, która zdarza się do natychmiastowych uruchomień metody konstruktora.

let instance = new NGONINITTEST();

NgOnInit jest wywoływany przez kątowe, gdy jest to konieczne, jak poniżej:

instance.ngOnInit();

Ale możesz zapytać, dlaczego używamy konstruktora w Angular?

Odpowiedź brzmi zależności.Jak wspomniano wcześniej, konstruktor wywołuje silnik JavaScript natychmiast po utworzeniu instancji klasy (przed wywołaniem ngOnInit przez Angular), więc typescript pomaga nam uzyskać Typ zależności zdefiniowanych w konstruktorze i na koniec mówi Angular jakiego typu zależności chcemy użyć w danym komponencie.

Constructor () {[3] } jest domyślną metodą w cyklu życia komponentu i jest używana do wstrzykiwania zależności. Konstruktor jest cechą maszynopisu.

NgOnInit () jest wywoływany po konstruktorze, a ngOnInit jest wywoływany po pierwszych ngOnChanges.

Czyli:

Konstruktor() --> ngOnChanges() --> ngOnInit ()

Jak wspomniano powyżej ngOnChanges() jest wywoływany, gdy zmienia się wartość wiązania wejściowego lub wyjściowego.

Obie metody mają różne cele/obowiązki. Zadaniem konstruktora (który jest funkcją obsługiwaną przez język) jest upewnienie się, że reprezentacja niezmiennicza posiada. W przeciwnym razie podano, aby upewnić się, że instancja jest ważna, podając poprawne wartości członkom. To od dewelopera zależy, co oznacza "poprawne".

Zadaniem metody onInit () (która jest pojęciem kątowym) jest umożliwienie wywołania metody na prawidłowym obiekcie (niezmiennik reprezentacji). Każdy metoda powinna z kolei upewnić się, że reprezentacja niezmiennicza utrzymuje się, gdy metoda zakończy działanie.

Konstruktor powinien być używany do tworzenia 'poprawnych' obiektów, metoda onInit daje możliwość wywoływania wywołań metod w dobrze zdefiniowanej instancji.

Konstruktor: Metoda konstruktora na klasie ES6 (lub w tym przypadku TypeScript) jest cechą samej klasy, a nie cechą kątową. Jest poza kontrolą Angular, gdy konstruktor jest wywoływany, co oznacza, że nie jest odpowiednim Hookiem, aby poinformować Cię, kiedy Angular zakończył inicjalizację komponentu. Silnik JavaScript wywołuje konstruktor, a nie Angular bezpośrednio. Dlatego powstał hook cyklu życia ngOnInit (i $onInit w AngularJS). Mając to w pamiętaj, że istnieje odpowiedni scenariusz użycia konstruktora. Wtedy chcemy wykorzystać iniekcję zależności-zasadniczo do "łączenia" zależności W komponent.

Jako, że konstruktor jest inicjowany przez silnik JavaScript, a TypeScript pozwala nam określić, jakie zależności chcemy zmapować do konkretnej właściwości.

NgOnInit jest tylko po to, aby dać nam sygnał, że Angular zakończył inicjalizację komponentu.

To faza zawiera pierwsze przejście przy wykrywaniu zmian względem właściwości, które możemy powiązać z samym komponentem - np. używając dekoratora @ Input ().

Z tego powodu właściwości @Input () są dostępne wewnątrz ngOnInit, jednak są niezdefiniowane wewnątrz konstruktora, według projektu

Konstruktor jest pierwszy i zdarza się, że @input data jest null! więc używamy Constructor do deklarowania usług i ngOnInit dzieje się po. Exsample for contrutor:

 constructor(translate: TranslateService, private oauthService: OAuthService) {
    translate.setDefaultLang('En');
        translate.use('En');}

Exsample for onInit:

ngOnInit() {
    this.items = [
      { label: 'A', icon: 'fa fa-home', routerLink: ['/'] },
      { label: 'B', icon: 'fa fa-home', routerLink: ['/'] }]
}

Myślę, że onInit jest jak Inialcomponents () w winForm .

Konstruktor jest wykonywany podczas tworzenia instancji klasy. To nie ma nic wspólnego z kanciastym. Jest to funkcja Javascript i Angular nie ma nad nią kontroli

NgOnInit jest specyficzny dla kąta i jest wywoływany, gdy kąt zainicjalizował komponent ze wszystkimi jego właściwościami wejściowymi

Właściwości @ Input są dostępne pod Hookiem cyklu życia ngOnInit. To pomoże Ci zrobić kilka rzeczy inicjalizacji, takich jak pobieranie danych z serwera back-end itp. wyświetl w widoku

@input właściwości są wyświetlane jako undefined wewnątrz konstruktora

W kanciastych cyklach życia

1) iniektor kątowy wykrywa parametr konstruktora('s) i klasę instantiate.

2) następny cykl życia połączenia kątowego

Haki Kątowe Lifecycle

NgOnChanges --> wywołanie w powiązaniu z parametrami dyrektywy.

NgOnInit -- > rozpocznij renderowanie kątowe...

Wywołanie innej metody ze stanem kątowego cyklu życia.

{[3] } jest wywoływany, gdy kątowe "instancjuje / konstruuje" komponent. Metoda ngOnInit jest Hookiem, który reprezentuje część inicjalizacyjną cyklu życia komponentu. Dobrą praktyką jest stosowanie go tylko do wtrysku serwisowego :

constructor(private 
    service1: Service1,
    service2: Service2
){};

Nawet jeśli jest to możliwe, nie powinieneś wykonywać jakiejś "pracy" wewnątrz. Jeśli chcesz uruchomić jakąś akcję, która musi wystąpić w komponencie "initialization", użyj ngOnInit:

ngOnInit(){
    service1.someWork();
};

Ponadto akcje, które obejmują właściwości wejściowe , nie można tego zrobić w konstruktorze. Powinny być umieszczone w metodzie ngOnInit lub innym haku. To samo dotyczy elementu powiązanego z widokiem (DOM), na przykład elementy viewchild :

@Input itemFromParent: string;
@ViewChild('childView') childView;

constructor(){
    console.log(itemFromParent); // KO
    // childView is undefined here
};

ngOnInit(){
    console.log(itemFromParent); // OK
    // childView is undefined here, you can manipulate here
};

Konstruktor

Funkcja konstruktora pochodzi z każdej klasy, konstruktory nie są specyficzne dla kąta, ale są pojęciami wywodzącymi się z obiektów zorientowanych. Konstruktor tworzy instancję klasy komponentu.

OnInit

Funkcja ngOnInit jest jedną z metod cyklu życia elementu kątowego. Metody cyklu życia (lub Hooki) w komponentach kątowych pozwalają na uruchomienie kawałka kodu na różnych etapach życia komponentu. W przeciwieństwie do metoda konstruktora, {[0] } metoda pochodzi z interfejsu kątowego (OnInit), który komponent musi zaimplementować, aby użyć tej metody. Metoda ngOnInit jest wywoływana krótko po utworzeniu komponentu.

Constructor jest częścią ES6 również typescript używa składni es6, a teraz dni es7, jak również, więc można wykorzystać zaawansowaną funkcję, która typescript skompiluje się do es5 / es4 (zgodnie z definicją), aby zapewnić wsparcie dla starej przeglądarki.

While ngOnInIt jest hakiem cyklu życia kątowego. Jest inicjalizowana, gdy twój komponent jest inicjowany. (Uznaj to za stan zrodzony z każdego nowego życia)

Mądrze jest używać ngOnInIt w porównaniu do konstruktora, ponieważ masz inny hook cyklu życia, taki jak ngOnDestory (rozważ to jako śmierć jakiegokolwiek życia). Tutaj możesz zrezygnować z subskrypcji każdego obserwowalnego, co jest dobre, aby zapobiec wyciekowi pamięci.

Na każde pytanie zapraszam do komentowania tej odpowiedzi.

constructor() służy do iniekcji zależności.

ngOnInit(), ngOnChanges() i ngOnDestroy() itd. są metody cyklu życia. ngOnChanges() zostanie wywołana jako pierwsza, przed ngOnInit(), gdy wartość związanej właściwości ulegnie zmianie, nie zostanie wywołana, jeśli nie nastąpi żadna zmiana. ngOnDestroy() jest wywoływany, gdy składnik jest usuwany. Aby go użyć, OnDestroy musi być implemented przez klasę.

Znalazłem odpowiedź i próbowałem przetłumaczyć ją na angielski: To pytanie wciąż pojawia się, nawet w wywiadach technicznych. W rzeczywistości istnieje duże podobieństwo między nimi, ale są też pewne różnice.

• Konstruktor jest częścią ECMAScript. Z drugiej strony ngOnInit() jest pojęciem kątowym.

• Możemy wywoływać konstruktory we wszystkich klasach, nawet jeśli nie używamy Angular

• LifeCycle: konstruktor jest wywoływany przed ngonintem ()

• W konstruktorze nie możemy wywoływać elementów HTML. Jednak w ngOnInit () możemy.

• Ogólnie, wywołania usług w ngOnInit (), a nie w konstruktorze

  Źródło: http://www.angular-tuto.com/Angular/Component#Diff

Konstruktor jest funkcją wykonywaną podczas budowy komponentu (lub innej klasy).

NgOnInit {[2] } jest funkcją należącą do grupy metod cyklu życia komponentu i są one wykonywane w różnych momentach naszego komponentu (stąd nazwa cyklu życia). Oto lista wszystkich z nich:

Konstruktor zostanie uruchomiony przed jakąkolwiek funkcją cyklu życia.