每次渲染时运行组件函数

Question

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

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

在内部

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

如果您确定

ngOninit

中的

HeaderComponent

仅触发一次，那么这意味着它不会在路线更改之间被破坏。如果您的组件出现在您的所有视图中，那就有意义了。

我不会使用本地存储将应用程序状态分发到应用程序组件。如果您的应用程序状态相对简单，那么可观察量就是正确的选择。创建一个服务，将应用程序的状态保存在可观察对象中。每次从 API 获取数据时，将新数据推送到可观察对象。然后在您的

HeaderComponent

中订阅

ngOnInit

钩子中的 observable，以便您的组件数据可以在任何更改时自动同步到应用程序状态。

Answer 2

您可以使用

*ngIf

来显示元素，并且可以在视图进入时将变量设为 true，在视图离开时将变量设为 false

喜欢

html

 <div  *ngIf="toShow">
    <app-list-fines></app-list-fines>
  </div>

并在

.ts

中使用此代码

  toShow:boolean=false
  constructor(
  ) { }

  ngOnInit() {
  }

  ionViewWillEnter() {
  this.toShow=true
  }
 

  ionViewWillLeave() {
    this.toShow = false
  }

这对我有用