html - Angular *ngIf 在单击页面或 alt+tab 后更新(重新聚焦)
问题描述
我在 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});
}
}
);
}
而且我在组件中有启用/禁用按钮,这是该代码的 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。首次加载网页时也可以正常工作。请帮助任何建议或想法可能会有所帮助。
解决方案
问题是 firebase 在 Angular 的视图线程之外请求用户令牌,所以我不得不在 Angular 的视图线程中更新模型。
this.ngZone.run(() =>{
this.user.webPushEnabled = true;
})
它帮助了我。
推荐阅读
- java - 如何在不丢失请求的情况下将 REST 请求排队/在 REST 端点上暂停处理一段时间?
- php - 将 TWIG 转换为 PHP 语法
- r - 为什么我无法将 cor.test() 用于点双序列数据?
- multithreading - 来自低级 tcl 库函数 Tcl_NewStringObj 的数据竞争问题
- javascript - ajax响应后如何刷新数据表
- mongodb - 在猫鼬中,.sort().skip() 和 .skip().sort() 之间有区别吗?
- node.js - 为什么使用 typescript 的 node.js 项目在导入 json 文件时需要在 typescript 编译器选项中声明 ResolveJsonModule 为 true?
- javascript - HTML 视频没有在部署的站点上播放,真的很不稳定
- visual-studio-code - VSCode 使用 CLI 与快捷方式打开时的不同权限(macOS Catalina)
- python - 手动实现python字符串实习