Angular BroadcastChannel: отправка данных между двумя вкладками браузера, свойство не существует для типа BroadcastChannel

Question

Как использовать канал вещания с 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;
    }
  }

Ошибка: свойство productName не существует для типа BroadcastChannel.

Answer 1

Проблема, с которой вы столкнулись, - это ценность this. В функции, которую вы назначили bc.onmessage, значение этого - функция, а не окружающий класс / экземпляр. Самый простой способ иметь функцию со значением thisв качестве примера можно использовать стрелочную функцию. т.е.

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

Это должно исправить ошибку.

Тем не менее, я хотел бы отметить, что, хотя все вышесказанное будет работать, я бы не стал рассматривать API BroadcastChannel как подходящий способ передачи данных между компонентами. Есть несколько лучших способов сделать это:

• Если один из компонентов является родительским для другого, вам следует использовать привязки @Input и @Output в angular (https://angular.io/guide/inputs-outputs#input-and-output-properties.
• Если компоненты являются отдельными, но совместно используют данные, вам следует использовать службу. Насколько я понимаю, лучше всего использовать компоненты для отображения вещей, но хранить данные и обработку данных в сервисах. (https://angular.io/guide/singleton-services)
• Если вы намерены использовать API BroadcastChannel для передачи данных между вкладками / окнами, открытыми в одном и том же источнике (как это предусмотрено), было бы лучше иметь службу, которая обрабатывает использование API и кросс-окна общение, а компоненты используют сервисы. Это всегда лучший вариант, так как он инкапсулирует реализацию и оставляет вашим компонентам заботу об отображении данных, а не их получении. Тогда у вас будет одна служба, которая и отправляет, и принимает данные из канала. Не беспокойтесь о том, что он получит данные, которые он отправляет, API умнее этого. Вы можете упростить это, используя библиотеку, например https://github.com/pubkey/broadcast-channel#readme, с большим преимуществом, что он будет работать в старых браузерах, включая те, которые не имеют API BroadcastChannel (в этих случаях используются другие, более медленные методы). Это также означает, что вам не нужно придерживаться спецификации, просто используйте библиотеку и поддерживайте ее в актуальном состоянии.