Question

我写了一个Ionic应用程序，其中显示了每个页面的工具栏。该工具栏包含一个标志，用于向登录用户显示未读消息（已附加sceenshot）。工具栏组件使用ngOnInit方法从服务读取未读消息。

组件html文件：

<ion-header>
<ion-toolbar color="dark">
    <ion-title>
        <h5>{{title}}</h5>
    </ion-title>
    <ion-buttons slot="start">
        <ion-back-button defaultHref="profiles/guardian-profile"></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="secondary">
        <ion-button>
            <ion-badge *ngIf="unreadNotifications" color="danger" [routerLink]="'/guardian-profile/guardian-notices'">{{unreadNotifications}}</ion-badge>
            <ion-badge *ngIf="!unreadNotifications"color="danger" [routerLink]="'/guardian-profile/guardian-notices'">{{announcementsNo}}</ion-badge>
        </ion-button>
        <ion-button (click)="logout()">
            <ion-icon slot="icon-only" name="exit"></ion-icon>
        </ion-button>
    </ion-buttons>
</ion-toolbar>

ts组件文件：

import {Component, Input, OnInit} from '@angular/core';
import {BaseHeaderClass} from '../../common/base-header-class';
import {EventService} from '../../services/event.service';
import {AuthService} from '../../services/auth.service';
import {Router} from '@angular/router';

@Component({
    selector: 'app-guardian-header',
    templateUrl: './guardian-header.component.html',
    styleUrls: ['./guardian-header.component.scss'],
})
export class GuardianHeaderComponent extends BaseHeaderClass implements OnInit {

    @Input() headerTitle: string;
    @Input() unreadNotifications: number;
    announcementsNo: number;

    constructor(private eventService: EventService, protected authService: AuthService, protected router: Router) {
        super(authService, router);
    }

    getData() {
        this.eventService.getActiveNoticesOfLoggedGuardian().subscribe(res => {
            this.announcementsNo = res.length;
        });
    }

    ngOnInit() {
        if (this.headerTitle) {
            this.title = this.headerTitle;
        } else {
            this.title = 'School Mate - Guardian View';
        }
        this.getData();
    }

    ionViewWillEnter() {
        this.getData();
    }
}

现在，当我阅读一条消息然后在我的组件和页面之间导航时，消息的数量正在更新，但是仅在我以前从未去过的地方。如果我之前访问过特定地点，则消息数量保持不变。无论我去过与否，我每次去任何地方都需要更新此信息。

我也不想使用@Input（）变量将该数字发送给组件，我希望它保持自我管理（我的组件仍然具有该注入，并且我想摆脱它）。我需要我的工具栏在必要时刷新未读消息。

Answer 1

您可以订阅导航路线的更改，因此，每当用户导航到另一条路线时，该事件都将发出一个新值。

constructor(private router: Router) {}

ngOnInit() {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                // your code goes here
            }
         });
}

我希望这会有所帮助。祝好运！：）

如何在每次访问组件或页面时刷新工具栏（每次使用任何资源时）

1 个答案: