Question

我在一个有角度的网站上有一个摄像机条目列表。单击条目将打开一个新窗口，并将摄像机显示为实时流。但是订阅却以某种方式无法识别。

重要说明：打开窗口后，在列表上进行以下单击不应打开新窗口，而应将实时流添加到先前打开的窗口中。

单击时，我首先打开窗口，然后调用我的服务方法。但是没有点击OnInit（）方法。

OnClick：

this.externalWindow = window.open(
          '/livesplit',
          '',
          'width=' + window.innerWidth + ',height=' + window.innerHeight
        );
//call service to add a cameraconfig
this.settingsService.changeCurrentCameraLivesplit(result);

打开的组件中的OnInit：

this.settingsService.currentCameraLivesplit.subscribe(currentCameraLivesplit => {
//this is never hit..
      if (currentCameraLivesplit) {
       this.currentcameraList.push(currentCameraLivesplit );
      }
    });

我的服务：

  private cameraLivesplitSource = new BehaviorSubject(null);
  currentCameraLivesplit = this.cameraLivesplitSource.asObservable();

  changeCurrentCameraLivesplit(currentCameraLivesplit: CameraConfig[]) {
    this.cameraLivesplitSource.next(currentCameraLivesplit);
  }

有人知道我在做什么错吗？

其他信息：该服务已添加到提供程序下的app.module.ts中

我试图创建一个Stackblitz（在此示例中，应该在第二个窗口的添加按钮下添加字符串[仅在第一个窗口中单击添加按钮！]

Stackblitz编辑器：https://stackblitz.com/edit/angular-k9h1mn

Stackblitz应用：https://angular-k9h1mn.stackblitz.io

Answer 1

经过数小时的尝试没有成功之后，我认为可观察/订阅不适用于外部窗口。但是，我想在这里分享我的解决方案，以便其他有相同问题的人可以节省很多工作时间：

首先，我创建一个新窗口：

let externalWindow = window.open(
   '/livesplit',
   '',
   'width=' + window.innerWidth + ',height=' + window.innerHeight
);

通话事件：

externalWindow.dispatchEvent(new CustomEvent('eventname', {detail: 'data to send'}));

在窗口的组件中：

@HostListener('window:eventname', ['$event'])
    testListener(event) {
      console.log(event.deatil);
    }

为什么无法在新的浏览器窗口中进行订阅

1 个答案: