Domanda Angular 2 e Ionic 2: quali sono le differenze tra i metodi constructor, ionViewDidLoad e ngOnInit


Quali sono le differenze tra i metodi constructor, ionViewDidLoad e ngOnInit. Quali azioni sono appropriate in ciascun caso.


13
2017-11-16 10:26


origine


risposte:


Costruttore

UN constructor non è una funzionalità angolare, è chiamata dal motore Javascript. Bene, scritto in TypeScript ma è un concetto ES6, fa parte dell'hociclo del ciclo di vita della classe. Pertanto non è un buon posto per sapere quando Angular ha terminato di inizializzare i suoi componenti.

È il posto giusto per fare un'iniezione di dipendenza.

ngOnInit

Il ngOnInit è un gancio del ciclo di vita angolare. Viene eseguito quando Angular ha terminato la configurazione del componente. Ciò significa che a questo punto i binding di proprietà sono fatti per esempio.

È un buon posto per inizializzare alcuni dati per il componente.

ionViewDidLoad

Il ionViewDidLoad è un evento del ciclo di vita della navigazione ionica. Ionic ha un concetto di pagine. Ha alcune classi relative alla logica di navigazione, la classe base per questo è NavController. Hanno un concetto di stack di navigazione, quindi le pagine sono fondamentalmente spinte o spuntate dalla pila. Durante questo processo di eventi di ciclo di vita di navigazione come ionViewDidLoad sono accesi.

ionViewDidLoad viene chiamato una volta caricata la pagina. Le pagine sono memorizzate nella cache di default, questo significa che questo evento non verrà riattivato se non distrutto.

Considerando che è un buon posto per mettere il codice di installazione per la pagina.

Riferimenti:

NavonicControler ionico

Ganci angolari del ciclo di vita

Classi ES6


3
2017-10-09 04:36



Sebbene la risposta di niks indichi il corretto ordine di attivazione degli eventi del ciclo di vita, il team di Angular consiglia di recuperare i dati all'interno dei costruttori.

Ma per rispondere alla tua domanda, ionViewDidLoad() e ngOnInit() dovrebbe funzionare allo stesso tempo, quindi sono essenzialmente la stessa cosa; anche se, ionViewDidLoad()  controlla la memorizzazione nella cache:

Se una pagina lascia, ma viene memorizzata nella cache, questo evento non verrà attivato nuovamente   una visione successiva.

Con quello, per tutto ciò che non vuoi memorizzato nella cache, ma vuoi caricare / prima che il componente venga montato, dovresti usarlo ionViewWillEnter(), o ionViewWillLoad() per cose come richieste GET. ionViewWillLoad () deve ancora essere documentato.


2
2017-07-12 19:45



Per quanto riguarda ionic2 il constructor: in termini semplici lo usiamo per creare istanze dei nostri plugin, servizi, ecc. Ad esempio: hai una pagina (vista) in cui vuoi mostrare la lista di tutti gli studenti, e hai un file json che contiene tutti gli studenti ( questo file è il tuo file di dati) quello che devi fare è creare un servizio in questo servizio, creerai un metodo e premi a http.get richiesta di ottenere i dati JSON, quindi qui avete bisogno di cosa? http semplicemente, in questo modo:

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)     
        }
    }

Notare di nuovo il costruttore, se vogliamo utilizzare questo metodo di servizio, andremo alla nostra vista / pagina e:

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

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

Notate di nuovo il costruttore qui, stiamo creando un'istanza di StudentService nel costruttore e un'altra cosa, stiamo usando il plugin socialSharing così da usare che stiamo creando anche un'istanza di questo nel costruttore.

OnInit: questa è una cosa davvero incredibile in ionic2 o possiamo dire in AngularJs2. Con lo stesso esempio sopra possiamo vedere cosa è ngOnInit è. Quindi sei pronto con il metodo di servizio, ora nella tua vista / pagina vuoi che i dati dell'elenco degli studenti siano disponibili non appena appare la tua vista, questa dovrebbe essere la prima operazione che avviene automaticamente al caricamento, perché quando la vista carica lo studente la lista dovrebbe essere visibile Quindi gli strumenti di classe OnInit e tu definisci ngOnInit. Esempio:

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

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

Spero che questa spiegazione chiarisca il tuo dubbio su questi due. Grazie


1
2018-05-07 17:41



Le migliori pratiche sono:

Uso constructor solo per l'iniezione di dipendenza.

Uso ngOnInit per impostare le proprietà dei componenti da dati statici o dati di navigazione (tramite NavParams). Il modello può utilizzare le proprietà impostate da ngOnInit, cioè, non è necessario utilizzare l'operatore Elvis data?.prop per verificare la nullità. Viene chiamato solo una volta quando viene creato un componente.

Uso ionViewDidLoad per impostare le proprietà solo una volta, simile a ngOniInit. Una pagina attiva questo evento una volta sola quando viene creato. Una pagina caricata dalla cache (ad esempio, una pagina viene caricata dopo l'apertura di una pagina principale) non attiva questo evento. Va bene usarlo per impostare le proprietà di una pagina modale perché la pagina modale si trova in cima a uno stack e non viene memorizzata nella cache.

Uso ionViewWillEnter per l'impostazione dei dati ogni volta che viene inserita una pagina. a differenza di ngOninit e ionViewDidLoad, si accende anche dalle pagine in cache.

Per entrambi ionViewDidLoad e ionViewWillEnter eventi, le proprietà dei componenti non vengono inizializzate quando viene eseguito il rendering del modello di una pagina. È necessario utilizzare l'operatore Elvis per verificare la nullità di un oggetto prima di accedere ai suoi membri.


1
2018-04-08 22:32