Ionic 4/ Angular 6 - 从 app.component 获取生命周期钩子之外的数据答案

【问题标题】：Ionic 4/ Angular 6 - getting data outside lifecycle hook from app.componentIonic 4/ Angular 6 - 从 app.component 获取生命周期钩子之外的数据
【发布时间】：2019-05-19 06:56:29
【问题描述】：

我在app.component.html 中设置了导航，我想在该模板中使用*ngIf。但是，由于 ionViewWillEnter 等生命周期钩子在 app.component.ts 中不起作用，我如何在每次弹出侧导航时触发调用？

我只是想得到一个红点来显示我的数组中是否有notifications

app.component.html

    ...
    <ion-list>
      <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          =====>HERE===><div class="red-dot" *ngIf="p.title == 'Home' && notifications.length > 0"></div> 
          <ion-label>
            {{p.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
...

app.component.ts

...
initializeApp() {
const parseQueryString = (queryString) => {
  const query = <any>{};
  for (let param of queryString.split('&')) {
    const pair = param.split('=');
    query[pair[0]] = pair[1];
  }
  return query;
};

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
  this.deepLinks.route({
  ...

我要添加到侧导航逻辑的内容

const newData = await this.api.listModel('Notification', {
  page: this.page
});
this.notifications = this.notifications.concat(newData);
this.notifications = _.filter(this.notifications, { isActioned: false }

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

据我了解，这是相同的组件。每当更改通知数组时，您都可以尝试调用 detectChanges()。更多信息在这里：https://angular.io/api/core/ChangeDetectorRef

如果这不是同一个组件，你可以使用 Rxjs 中的 service 和 Observables 作为代理。

【讨论】：