我对Angular 2和Ionic 3中组件的生命周期感到困惑。

我有以下组成部分

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

这段代码在运行之前看起来不错,然后没有按预期运行。

根据文档,组件中的生命周期如下所示:构造函数-> IonViewCanEnter,但是我的代码中发生的事情是,进入配置文件页面后,构造函数就运行了,但是在完成之前,它开始运行ionViewCanEnter方法,因此出现错误在我的页面上,因为ionViewCanEnter方法中需要一些数据this.user_profile ,但是由于构造函数方法尚未完成其代码的运行,因此ionViewCanEnter中的this.user_profile为空或为零。

Kinda困惑如何在进入ionViewCanEnter方法之前确保构造函数方法已完成。

谢谢

#1楼 票数:1

你是对的。 生命周期是Constructor -> IonViewCanEnter 但是在您的构造函数中有一个异步函数。 在运行IonViewCanEnter之前IonViewCanEnter尚未完成。
尝试将IonViewCanEnter所有代码移动到ionViewDidEnter 如果仍然无法执行,则应将代码放在.then函数中,如下所示:

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

  ask by Kingsley Simon translate from so

未解决问题?本站智能推荐:

1回复

离子中的组件生命周期

我建立了一个组件如下 在模板中使用该变量之前,我必须对该变量执行一些逻辑。 但是在ngOnInit和ngAfterViewInit ,该变量未定义。 有人可以建议使用哪个钩子来获取变量吗?
2回复

在Angular|Ionic中没有找到[自定义组件]的组件工厂

我正在将Ionic 3与延迟加载的页面一起使用。 尝试在页面内的组件内显示模式时,出现以下错误: 正如你可以看到下面下来,我已经添加了CourseEditorComponent作为entryComponent到courses.modules.ts,其中得到由dashboard.module
1回复

如何在angular2和ionic2中保留组件的DOM元素和模板字符串

我使用ionic2和angular2构建应用程序,我想定义一个自定义组件,如ion-navbar,它可以在其中添加标题和按钮,就像: <t-nav> <t-title>title for custom nav</t-title> <t-butto
2回复

如何使用Ionic3和Angular4创建可重用组件

我想为我的应用程序创建一个可重用的标头。 所以,我做了: 创建组件(app-header): app-header.ts : 有 HTML: app-header.html : 而且我已经添加了AppHeaderComponent到declarations中@NgModule : 我正在使用 T
3回复

如何在IONIC3中为国际电话输入创建IONIC组件

如何为https://github.com/jackocnr/intl-tel-input创建 IONIC 3 组件? 或者离子 3 中有任何其他模块,我将不胜感激。
2回复

如何在angular2或Ionic中应用*ngFor

我正在从事离子项目。 在单击按钮时,正在处理一个请求,并接收到数据,如下所示: 鉴于: 在控制台上,我在test33变量中接收数据为: 但是{{user0.name}}没有返回名称。 请指出我在哪里犯错。
3回复

Ionic3中的单身人士,Angular4

我将服务定义为类,如下所示: 在其他组件或页面中,我只使用import命令导入该类。 在构造函数中: 在我的主app.module.ts中,我已将该类服务添加为提供者。 在Ionic 2中,事情按预期工作。 服务是单身人士。 但是在使用角度4的Ionic 3中,看起来每个组
1回复

input.setfocus不是Ionic和Angular中的函数

单击一个字段时,我希望它位于我的移动键盘之上。 为了做到这一点,我正在尝试使用以下代码但出现错误。 Home.html代码如下: home.ts代码如下: 当我单击该字段时,我在控制台上看到此错误。 input.setfocus 不是函数