Angular 2 und 3 Ionic Lifecycle Abschluss in einer Komponente

Question

ich ganz mit Lifecycles einer Komponente in Angular 2 und Ionic verwirrt bin 3.

Ich habe die folgende Komponente

import {Component} from '@angular/core'; 
import { MemberService } from '../../services/members/member.service'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Storage } from '@ionic/storage'; 

@Component({ 
    selector: 'page-profile', 
    templateUrl: 'profile.html', 
}) 
export class ProfilePage { 
    originPost: string = "mine"; 
    profile: any; 
    passed_profile: any; 
    username: any; 
    user_profile: any; 
    following_text: string; 
    storage: Storage = new Storage(); 
    // We need to inject AuthService so that we can 
    // use it in the view 



    constructor(public memberAuth: MemberService, public navCtrl: NavController, public params: NavParams) { 
    this.passed_profile = params.get('profile'); 
    this.storage.get('profile').then(profile => { 
     this.user_profile = profile; 
    }); 
    } 

    ionViewCanEnter() { 
    if(this.passed_profile) { 
     this.profile = this.passed_profile; 

    } else { 
     this.getProfileDetails({username: this.user_profile.username}); 

    } 

    if(this.profile.username != this.user_profile.username) { 
     this.following_text = this.profile.is_following ? 'Following' : 'Follow'; 
    } 
    } 

    ionViewDidLoad() { 
    console.log("profile page has loaded") 
    } 


    getProfileDetails(username) { 
    this.memberAuth.get_profile(username).subscribe((profile) => { 
     this.profile = profile; 
    }) 
    } 
} 

Dieser Code sieht gut aus, bis Es läuft dann läuft es nicht wie erwartet.

Wie in der Dokumentation, Lebenszyklus in einer Komponente ist wie folgt Konstruktor -> IonViewCanEnter, aber was passiert in meinem Code ist, dass beim Eintreten in die Profilseite der Konstruktor ausgeführt wird, aber vor der Fertigstellung startet es die IonViewCanEnter-Methode daher Ich erhalte einen Fehler auf meiner Seite, weil einige Daten this.user_profile in der IonViewCanEnter Methode benötigt werden, aber weil die Konstruktormethode nicht beendet ist, ihren Code auszuführen, dann ist in dem ionViewCanEnter this.user_profile leer oder Null.

Irgendwie verwirrt, wie sichergestellt werden kann, dass die Konstruktormethode abgeschlossen ist, bevor sie in die ionViewCanEnter-Methode geht.

Danke

Answer 1

Sie haben Recht. Der Lebenszyklus ist Constructor -> IonViewCanEnter. Aber in Ihrem Konstruktor hat eine asynchrone Funktion. Vielleicht ist es nicht abgeschlossen, bevor IonViewCanEnter läuft.
Versuchen Sie, den gesamten Code in IonViewCanEnter zu ionViewDidEnter zu verschieben. Wenn es immer noch nicht funktioniert, sollten Sie Ihren Code innerhalb .then Funktion wie folgt setzen:

ionViewDidEnter(){ 
    this.storage.get('profile').then(profile => { 
     this.user_profile = profile; 
     //Now you can use this.user_profile 
     this.profile = this.passed_profile; 
     ... 
    }); 
}