每次渲染时运行一个组件函数

Question

我有一个 Ionic Angular 应用程序，它在每次视图更改时调用 API 并将值存储在 ionic 存储中。

每个页面都有一个“标题”组件，应该显示存储中的这个值。

在ngOnInit(){} 内部，我从存储中获取值并更新值。但是，它只在每个页面视图中执行一次。所以如果我查看主页，例如，转到第2页，然后返回主页，代码将不会重新执行。

我想这是因为当您更改视图时页面实际上并没有卸载，因此没有理由“重新构建”。

constructor(){} 仅在该视图的第一个构造上运行

ngOnInit() {} 只运行该视图的第一个初始化

ionViewDidLoad() {} 无法运行，因为它不是视图，而是离子页面生命周期挂钩

我基本上是在寻找一种方法来调用 API，将值存储在离子存储中，并在每次页面更改时更新标题中的值。

我一直认为这可以通过 Observables 实现，但我不确定这将如何用于离子存储。

或者甚至使用离子视图生命周期钩子之一从视图中的存储中获取值并将其作为道具传递到标题中，但这看起来很混乱。

我使用存储的原因是余额在其他地方使用，而不仅仅是在标题中，如果它只是在存储中可用，它可以节省我多次调用。

任何建议表示赞赏

export class HeaderComponent {
  balance = 0.00;

  constructor(
    private storage: Storage,
  ) { }

  async ngOnInit() {
    this.storage.get('balance').then(data => {
      this.balance = data;
    });
  }
}

Answer 1

如果您确定 HeaderComponent 中的 ngOninit 只会触发一次，那么这意味着它不会在路线更改之间被破坏。如果您的组件出现在您的所有视图中，那将是有意义的。

我不会使用本地存储将您的应用程序状态分配给您的应用程序组件。如果您的应用程序状态相对简单，那么 observables 就是要走的路。创建一个将应用程序状态保存在可观察对象中的服务。每次从 API 获取数据时，将新数据推送到 observable。然后在您的HeaderComponent 中订阅ngOnInit 钩子中的可观察对象，以便您的组件数据可以在任何时候自动同步到应用程序状态。