Question

登录后，用户输入他的姓名并点击登录，下一页不会显示姓名。如果他回去重试，那么之后就可以了。

在HTML模板上：

<ion-title>Your name is {{name}}</ion-title>

关于组件：

  name: string;
  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
    this.storage.get('name').then((val) => {this.name= val;});
  }

Answer 1

当用户登录时，您可以在组件中公开事件（离子事件），只需订阅您定义的事件。事件发生时，您可以更新您的财产。

你的应用程序不起作用，因为在早期状态下，存储不会保留任何数据，即使你从存储中获取，也没有任何数据。

constructor(
    private events: Events,
    private storage: Storage,
    //...
) { } 

login(/* params */) {
  // after login successful, save name to storage
  this.storage.set('name', JSON.stringify(name))
    .subscribe(() => {
      this.events.publish('login:success');
    });
}

关于组件：

name: string;
constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, private events: Events) {
    this.storage.get('name').then((val) => {this.name= val;});
    this.event.subscribe('login:success', () => {
      this.storage.get('name').then((val) => {this.name= val;});
    })
  }
}

Answer 2

我认为你正在推动storage.set()部分之外的下一页。因为，我无法访问您的代码，演示如何完成它。我相信这会奏效：

this.storage.set('name',"somename")
 .then((val) => {
   console.log("Value is set to somename");
   this.navCtrl.push(NextPage);
 });

这将在您在存储中设置值的上一页上完成。

在这种情况下，只有在设置了值时才能确保导航到下一页。

插值不适用于页面的首次加载

2 个答案: