Angular 2 i Ionic 2: Jakie są różnice między konstruktorami, metodami ionViewDidLoad i ngOnInit?

Question

Jakie są różnice między konstruktorami, metodami ionViewDidLoad i ngOnInit. Jakie działania są odpowiednie w każdym przypadku.

Answer 1

W odniesieniu do ionic2 constructor: w prostych słowach używamy go do tworzenia instancji naszych wtyczek, usług itp., Na przykład: Masz stronę (widok), gdzie chcesz wyświetlić listę wszystkich uczniów, a ty mieć plik json, który zawiera wszystkich uczniów (ten plik jest plikiem danych), co musisz zrobić, aby utworzyć usługę w tej usłudze, utworzysz metodę i uderzysz w żądanie http.get, aby uzyskać dane json, więc tutaj potrzebujesz co? http po prostu zrobić w ten sposób:

import {Http} from '@angular/http'; 
@Injectable() 
export class StudentService{ 
    constructor(public http: Http){} 
    getAllStudents(): Observable<Students[]>{ 
     return this.http.get('assets/students.json') 
     .map(res => res.json().data)  
     } 
    } 

zawiadomienie konstruktora teraz ponownie, jeśli chcemy korzystać z tej metody usługi pójdziemy do naszego widoku/strony oraz:

import {StudentService} from './student.service'; 
import { SocialSharing } from '@ionic-native/social-sharing'; 
export class HomePage implements OnInit { 

    constructor(public _studentService: StudentService, public socialSharing: SocialSharing) { 
    } 

ponownie zauważyć konstruktora tutaj, my Tworzymy instancję StudentService w konstruktorze i jeszcze jedno, używamy wtyczki socialSharing, aby użyć tego, że tworzymy taką instancję również w konstruktorze.

OnInit: To jest naprawdę niesamowite w ionic2 lub możemy powiedzieć w AngularJs2. W tym samym przykładzie powyżej widzimy, co to jest ngOnInit. Więc jesteś gotowy z metodą serwisową, teraz w widoku/stronie chcesz, aby dane z listy studentów były dostępne, gdy tylko pojawi się twój widok, powinna to być pierwsza operacja, która automatycznie się załaduje, ponieważ podczas wczytywania widoku lista studentów powinna być widoczna. Tak więc klasa implementuje OnInit i definiujesz ngOnInit. Przykład:

export class HomePage implements OnInit { 
... 
.... 
constructor(....){} 

ngOnInit(){ 
    this._studentService.getAllStudents().subscribe(
    (students: Students[]) => this.students = students, 
    ) 

Mam nadzieję, że to wyjaśnienie rozwiąże wątpliwości dotyczące tych dwóch. Dzięki

Answer 2

Mimo że odpowiedź Niks wskazuje właściwy porządek rozkazów cyklu życia, zespół Angular recommends against fetching data inside constructors.

Ale aby odpowiedzieć na twoje pytanie, ionViewDidLoad() i ngOnInit() powinny działać w tym samym czasie, więc są w zasadzie to samo; choć ionViewDidLoad()checks for caching:

Jeżeli liście stronę, ale jest buforowane, to wydarzenie nie będzie ogień ponownie kolejny patrzenia.

Z tym, za nic nie chcesz pamięci podręcznej, ale chcemy, aby załadować na/przed komponent zostanie zamontowany należy użyć ionViewWillEnter() lub ionViewWillLoad() do rzeczy, jak żądań GET. ionViewWillLoad() has yet to be documented.

Answer 3

Konstruktor

constructor nie jest kątowym cecha, nazywana jest przez silnik JavaScript. Cóż, napisany w TypeScript, ale jest to koncepcja ES6, jest częścią haka klasy lifetime. Dlatego nie jest to dobre miejsce, aby wiedzieć, kiedy Angular zakończył inicjowanie swoich komponentów.

Jest to odpowiednie miejsce do wykonania wstrzyknięcia zależnego.

ngOnInit

ngOnInit jest haczyk kątowa cyklu. Jest wykonywany, gdy Angular zakończy konfigurowanie komponentu. Oznacza to, że w tym momencie wiązania własności są wykonywane na przykład.

Jest to dobre miejsce do inicjowania niektórych danych dla komponentu.

ionViewDidLoad

ionViewDidLoad jest wydarzeniem nawigacja cyklu jonowej. Ionic ma koncepcję stron. Ma kilka klas związanych z logiką nawigacji, podstawową klasą jest NavController. Mają pojęcie stosu nawigacyjnego, więc strony są w zasadzie wypychane lub wyskakiwane ze stosu. Podczas tego procesu zdarzenia związane z cyklem życia nawigacji, takie jak ionViewDidLoad, są uruchamiane.

jonViewDidLoad jest wywoływany po załadowaniu strony. Domyślnie strony są buforowane, co oznacza, że ​​zdarzenie to nie zostanie ponownie uruchomione, jeśli nie zostanie zniszczone.

Biorąc pod uwagę, że jest to dobre miejsce do ustawienia kodu strony.

Referencje:

Ionic NavControler

Angular Lifecycle Hooks

ES6 Classes