时间戳

首页 > 解决方案 > Angular BroadcastChannel：在两个浏览器选项卡之间发送数据，“BroadcastChannel”类型上不存在属性

angular - Angular BroadcastChannel：在两个浏览器选项卡之间发送数据，“BroadcastChannel”类型上不存在属性

问题描述

如何在 Angular Typescript 中使用广播频道？我们在两个浏览器窗口之间发送数据（这是每个 UX 设计）。下面出现错误。为什么财产不存在？

尝试在第二个组件中连续接收数据，无论何时发送某些东西。

阅读此资源：https ://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

发件人组件正在执行以下操作：

ngOnInit() {
    const bc = new BroadcastChannel('test_channel');
    bc.postMessage('GetData');

接收组件：

ngOnInit() {
  const bc = new BroadcastChannel('test_channel');
  bc.onmessage = function (ev) { 
    if (ev.data == "GetData") {
       this.productName = "test;
    }
  }
}

错误：“BroadcastChannel”类型上不存在属性“productName”。

标签： angulartypescriptangular8broadcast-channel

解决方案

您遇到的问题是this. 在您分配给bc.onmessage的函数中， this 的值是函数，而不是周围的类/实例。拥有一个函数的最简单方法this是使用箭头函数，同时将其作为实例的值。IE

ngOnInit() {
    const bc = new BroadcastChannel('test_channel');
    bc.onmessage = (ev) => { 
    if (ev.data == "GetData") {
       this.productName = "test;
    }
}

那应该可以解决错误。

但是，我想指出，虽然上述方法可行，但我不会将 BroadcastChannel API 视为在组件之间传递数据的适当方式。有很多更好的方法来做到这一点：

  • 如果其中一个组件是另一个组件的父级，则应使用 Angular 的模板 @Input 和 @Output 绑定（https://angular.io/guide/inputs-outputs#input-and-output-properties。
  • 如果组件是独立的但共享数据，则应使用服务。据我了解，最好的做法是使用组件来显示事物，但将数据和数据处理保留在服务中。（https://angular.io/guide/singleton-services）
  • 如果您的意图是使用 BroadcastChannel API 在同一来源打开的选项卡/窗口之间传递数据（如预期的那样），最好有一个服务来处理 API 和跨窗口的使用通信，并让组件使用服务。这总是更好的选择，因为它封装了实现，让您的组件担心显示数据，而不是获取数据。然后，您将拥有一项服务，该服务既可以从通道发送数据，也可以从通道接收数据。不用担心它会接收到它发出的数据，API 比这更智能。您可以通过使用库来简化这一点，例如https://github.com/pubkey/broadcast-channel#readme，一个很大的好处是它可以在较旧的浏览器上运行，包括那些没有 BroadcastChannel API 的浏览器（它使用其他较慢的方法作为这些情况的后备）。这也意味着您不必遵守规范，只需使用库并使其保持最新。

推荐阅读