每次渲染组件函数时都运行该函数

Question

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

每个页面都有一个"header"组件，用于显示存储中的此值。

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

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

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

ngOnInit() {}只运行该视图的第一个init

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只触发一次，那么这意味着它在路由更改之间没有被破坏。如果您的组件出现在您的所有视图中，这将是有意义的。

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