Angular 如果Chrome Show Notifications对话框用X关闭，应用程序将失去焦点

我有一个按钮，允许用户打开通知
（在意外时间没有令人讨厌的弹出窗口）

---

Chrome版本72.0.3626.121（官方版本）（64位）

您必须在中更新组件变量

---

你能更好地解释一下吗

我的代码触发了，但是页面只有在你手动点击后才会更新？哪种代码？应该更新什么？用于显示/隐藏消息和按钮的变量已设置，但在我手动单击页面之前，它们不会显示和隐藏。谢谢！不知怎的，我从来都不知道角区。要学的东西太多了。
<span *ngIf="!showButton">
<div class="notificationsMsg">{{notificationMessage}}</div>
</span>
<span *ngIf="showButton">
<button mat-stroked-button
      id="sendButton"
      (click)="enableNotifications()">Enable Notifications</button>
</span>

// the button was clicked
enableNotifications() {

Notification.requestPermission(perm => {
  if (perm === 'granted') {
    console.log('allow clicked');
    this.notificationMessage = 'Woo Hoo';
  } else  if (['default', 'denied'].indexOf(perm) > -1) {
    console.log('block clicked or dialog closed');
    this.notificationMessage = 'DENIED';
  }
  this.showButton = false;
});
}

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  notificationMessage = '';
  showButton: boolean;

  constructor(private zone: NgZone) { }

  ngOnInit() {
    Notification.requestPermission(perm => {
      if (perm === 'granted') {
        console.log('allow clicked');
        this.zone.run(() => {
          this.showButton = false;
          this.notificationMessage = 'Woo Hoo';
        });

      } else if (['default', 'denied'].indexOf(perm) > -1) {
        console.log('block clicked or dialog closed');
        this.zone.run(() => {
          this.showButton = false;
          this.notificationMessage = 'Denied';
        });
      }

    });
  }
}