监听 DOM 变化答案

【问题标题】：Listening to DOM changes监听 DOM 变化
【发布时间】：2021-02-16 01:42:53
【问题描述】：

我想做一些有角度的事情，但我不知道有没有办法使用它。

例如：

我在 2 个选项卡中打开了一个屏幕，在该屏幕上有一个按钮，如果我单击它，它会显示一个 div。很简单。

HTML

<div class="card-line" *ngIf="showDiv">
      <span>show div</span>
</div>

<button (click)="showDiv()">test</button>

app.ts

showDiv = false;

showDiv() {
    showDiv = true;
 }

我希望当我单击此按钮时，它会在我所在的屏幕上以及在另一个选项卡上打开屏幕时显示 div。有可能以角度做到这一点吗？有什么方法可以在一个选项卡上听到此更改并反映在另一个选项卡上？

【问题讨论】：

标签： angular typescript frontend

【解决方案1】：

您可以使用Broadcast Channel API

Broadcast Channel API 是一个简单的 API，它使通信在浏览上下文之间

试试这个：

export class AppComponent {
  name = "Angular " + VERSION.major;
  _showDiv = false;

  // Connection to a broadcast channel
  bc = new BroadcastChannel("channel");

  constructor(private cdr: ChangeDetectorRef) {
    this.bc.onmessage = ev => {
      this._showDiv = ev.data.showDiv;
      this.cdr.detectChanges();
    };
  }

  showDiv() {
    this._showDiv = true;
    this.bc.postMessage({ showDiv: true });
  }
}

Working Example

【讨论】：

【解决方案2】：

您可以使用本地存储。

showDiv = false;

toggleDiv() {
  this.showDiv = !this.showDiv;
  localStorage.setItem('showDiv', this.showDiv ? 'true' : 'false');
}

@HostListener('window:storage', ['$event'])
handleStorageEvent(event: StorageEvent) {
  console.log(event);
  if (event.key === 'showDiv') {
    this.showDiv = event.newValue === 'true';
  }
}

【讨论】：

在同一个选项卡中它甚至可以工作，但如果我在匿名选项卡中打开它，它就不起作用，因为它存储在本地存储中
我认为匿名选项卡如果没有某种带有轮询或 WebSocket 的后端是不可能的。