angular - 如何触发一个组件的更改。从另一个组件 Angular

Question

我有一个标题组件，其中存储了一些通知notifications。我使用getUserNotificationsonngOnInit()最初加载通知。当新消息到达我的服务时，我也在尝试更改应用程序标题上的通知而不重新加载我的页面。

当使用间隔从同一个组件调用它时，该设计绑定了一个新值，但是当我尝试从另一个服务调用它时，它并没有改变，但通知的值会打印新的通知。

我想知道为什么。由于我是新手，任何人都可以帮助我了解做错了什么并详细说明我可以采取的解决方案。一个详细的解释会很好，但是你能给出的任何东西都是真正的祝福。

消息服务.ts

receiveMessage() {
  this.angularFireMessaging.messages.subscribe((payload:any) => {
    const NotificationOptions = {
      body: payload.notification.body,
      data: payload.data,
      icon: payload.notification.icon
    }
    navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
      registration.showNotification(payload.notification.title, NotificationOptions);
      this.getComponentNotifications();
    });
    this.currentMessage.next(payload);
  })
}
    
getComponentNotifications(){
  let appHeader=new AppHeaderComponent(this.router,
                                       this.userService,
                                       this.appservice,
                                       this.commonService,
                                       this.sharedService,
                                       this.onlineExaminationService,
                                       this.modalService,
                                       this.notificationService);
    appHeader.getUserNotifications();
  }

appheader.html

<li class="nav-item notification-nav"  *ngIf="isLoggedIn&&notifications&&notifications.length>0" >
  <a class="p-3 notification-icon">
    <span class="fa fa-bell"></span>
    <span class="counter" id="appcounter1">{{unreadlength}}</span>
  </a>
  <div class="notification-dropdown">
    <div class="notification_header text-center" *ngIf="unreadlength!=0">
      You have 
      <strong id="appcounter2">
        {{unreadlength}}
      </strong>
      New Notifications
    </div>
    <div class="notification_header text-center" *ngIf="unreadlength==0">
      You have no New Notifications
    </div>
    <div style="max-height:200px;overflow-y: auto;">
      <div class="px-3 py-2 notification_item" 
           *ngFor="let item of notifications| slice:0:10" 
           [ngClass]="item.NotificationStatus?'read':'unread'
           (click)="showModal(item.NotificationCandidateID)"
      >
        <label class="pull-right">
          {{item.ExamTypeName}} {{item.CreatedDate | date: 'dd-MM-yyyy'}}
        </label>
        <b>
          <label style="color: black;">
            {{item.Title.substr(0,8)}}
            <label *ngIf="item.Title.length>9">
              ...
            </label>
          </label>
        </b>
        <div [innerHTML]="item.ShortContent.substr(0,55)+'...'">
        </div> 
      </div>
    </div>
    <div class="notification_footer text-center" (click)="showModal()">
      View all Notifications
    </div>
  </div>
</li>

应用头文件

getUserNotifications() {
  let data1 = sessionStorage.getItem('token');
  if (data1 && data1.length > 0) {
    this.loggedInUserId=data1["UserID"];
    this.notificationService.GetCandidateNotifications(this.loggedInUserId)
    .subscribe(data => {
      this.notifications=data.Data;
      console.log(this.notifications)
      this.showUnreadCount();
    });
  }
}
      
showUnreadCount(){
  if(this.notifications && this.notifications.length > 0){
    this.filter = this.notifications.filter(function(x:any){
      return x.NotificationStatus==0
    });
    this.unreadlength=this.filter.length;
  }
}

标签： angulardata-bindingpush-notificationangular8angular-changedetection