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

Question

How do I use Broadcast channel with Angular Typescript? We are sending data between two browser windows, (this is per UX design). Getting error below. Why doesn't the property exist?

Trying to receive data in second component continuously, anytime something is sent.

Reading this resource: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

Sender Component is doing following:

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

Receiving Component:

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

Error: Property 'productName ' does not exist on type 'BroadcastChannel'.

Answer 1

The issue you're having is the value of this . In the function which you have assigned to bc.onmessage , the value of this is the function, not the surrounding class/instance. The easiest way to have a function whilst having the value of this as the instance is to use an arrow function. ie

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

That should fix the error.

However, I would like to point out that whilst the above would work, I wouldn't consider the BroadcastChannel API as an appropriate way of passing data between components. There are quite a few better ways of doing it:

• If one of the components is the parent of another, you should use angular's template @Input and @Output bindings ( https://angular.io/guide/inputs-outputs#input-and-output-properties .
• If the components are separate but share data, you should use a service. As far as I understand it, it is best practice to use components to display things, but keep data and data processing in services. ( https://angular.io/guide/singleton-services )
• If your intension is to use the BroadcastChannel API to pass data between tabs/windows which are open at the same origin (as it is intended for), it would be better to have a service that handles the usage of the API and cross-window communication, and have the components use services. This is always the better option, as it encapsulates the implementation, and leaves your components to worry about displaying data, rather than getting it. Then you would have one service that both sends and receives data from the channel. Don't worry about it receiving data that it sends out, the API is smarter than that. You could simplify this by using a library, such as https://github.com/pubkey/broadcast-channel#readme , with a big benefit being that it will work on older browsers, including ones that don't have the BroadcastChannel API (it uses other, slower methods as a fallback for these cases). It also means you don't have to keep with the spec, just use the library and keep it up to date.