Angular *ngIf 在点击页面或 alt+tab（重新聚焦）后更新

Question

我在一个 angular 项目上有一个奇怪的错误，这些是代码片段

@Injectable()
export class FirebaseMessagingService {
    public tokenReceivedEmitter: any = new EventEmitter();
    public messageReceivedEmitter: any = new EventEmitter();

constructor(
    private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messaging.subscribe(
        (messaging) => {
            messaging.onMessage = messaging.onMessage.bind(messaging);
            messaging.onTokenRefresh = messaging.onTokenRefresh.bind(messaging);
        }
    );
}

/**
 * request permission for notification from firebase cloud messaging
 *
 * @param userId userId
 */
requestPermission(userId) {
    this.angularFireMessaging.requestToken.subscribe(
        (token) => {
            this.tokenReceivedEmitter.emit({status: true, result: token});
        },
        (err) => {
            this.tokenReceivedEmitter.emit({status: false, result: err});
        }
    );
}

/**
 * hook method when new notification received in foreground
 */
receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
        (payload) => {
            this.messageReceivedEmitter.emit(payload);
        });
}

这就是 firebase 消息服务，它发出令牌接收事件以及收到推送通知的时间。

现在在组件中

ngOnInit(){
    // Subscribing to firebase token receive
         this.firebaseTokenSubscription = this.messagingService.tokenReceivedEmitter.subscribe(
            (message) => {
                if (message.status) {
                    const token = message.result;
                    this.sendNotificationToken(token);
                } else {
                    this.snackBar.open(message.result, this.translate.instant('CLOSE') 
                    {duration:3000});
                }
        }
    );
}

而且我在组件中还有 enable/disable 按钮，这里是该代码的 html 部分

<div *ngIf="user && !user.webPushEnabled"
     class="user-verification fx-all-100 layout-all-row-wrap">
    <div class="fx-gtSm-48 fx-ltMd-100 layout-all-col-nowrap">
        <p>{{"EXCHANGE.PROFILE.ENABLE_DISABLE_NOTIFICATION" | translate}}</p>
    </div>
    <div class="fx-gtSm-48 fx-ltMd-100 offset-gtSm-4 align-all-fxEnd-fxStr">
        <button mat-raised-button class="button-auth button-main-shadow"
                (click)="updateNotificationStatus(true)">
            {{"EXCHANGE.PROFILE.ENABLE_NOTIFICATIONS_BUTTON" | translate}}
        </button>
    </div>
</div>

<div *ngIf="user && user.webPushEnabled"
     class="user-verification fx-all-100 layout-all-row-wrap">
    <div class="fx-gtSm-48 fx-ltMd-100 layout-all-col-nowrap">
        <p>{{"EXCHANGE.PROFILE.ENABLE_DISABLE_NOTIFICATION" | translate}}</p>
    </div>
    <div class="fx-gtSm-48 fx-ltMd-100 offset-gtSm-4 align-all-fxEnd-fxStr">
        <button mat-raised-button class="del-api-key-btn button-main-shadow"
                (click)="updateNotificationStatus(false)">
            {{"EXCHANGE.PROFILE.DISABLE_NOTIFICATIONS_BUTTON" | translate}}
        </button>
    </div>
</div>

显然我有

 updateNotificationStatus(on: boolean) {
        if (on) {
            this.messagingService.requestPermission(this.user.userId);
        } else {
            this.userService.updateNotificationStatus(null, false).subscribe(
                (result) => {
                    this.user.webPushEnabled = false;
                },
                (error) => {
                    this.snackBar.open(error, this.translate.instant('CLOSE'), {duration: 3000});
                }
            );
        }
}

sendNotificationToken(token) {
    this.userService.updateNotificationStatus(token, true).subscribe(
        (result) => {
            debugger;
            this.user.webPushEnabled = true;
        },
        (error) => {
            this.snackBar.open(error, this.translate.instant('CLOSE'), {duration: 3000});
        }
    );
}

问题是，当我启用推送通知时，它只会在页面重新加载或重新聚焦（alt+tab 或用鼠标单击页面）时更新 html。首次加载网页时也能正常工作。请帮助任何可能有帮助的建议或想法。

Answer 1

问题是 firebase 在 Angular 的视图线程之外请求用户令牌，所以我不得不在 angular 的视图线程中更新模型。

this.ngZone.run(() =>{
     this.user.webPushEnabled = true;
})

它帮助了我。

Angular *ngIf 在点击页面或 alt+tab（重新聚焦）后更新

Angular *ngIf updating after clicking on page or alt+tab (refocusing)

html

eventemitter

typescript

angular