0

我正在研究一种与我正在加载到<iframe>我的角度应用程序中的组件进行通信的方法。我正在使用BroadcastChannelapi 来执行此操作，虽然我没有收到任何错误，但我在 iframe 中加载的组件中没有收到任何消息。我创建了一个用于发送看起来像这样的数据的服务。

export class StylingChannelService {

    StylingChannel: BroadcastChannel = new BroadcastChannel('box-styles');



    public setStyles(newStyles: BoxStyleStateModel):void{
        this.StylingChannel.postMessage({
            type: 'boxStyle',
            data: {...newStyles}
        });
        console.log(newStyles);
    }

}

然后在我的组件内部我这样做

export class MyComponent {

    constructor(
        private store: Store,    //I'm using NGXS for state management
        private dataB: StylingChannelService
    ){}

    ngOnInit():void{
        this.store.select(getStylingState).subscribe(a => this.dataB.setStyles(a));
    }

}

<iframe>我为在我执行此操作的地方呈现的组件制作了另一个服务文件

StylingChannel = new BroadcastChannel('box-styles');

BoxStyles! : BehaviorSubject<any>; // using type any for now just trying 
                                   // to get it to work

constructor() {
  this.StylingChannel.onmessage = (styles) =>{
    console.log(styles);
    this.Styles.next(styles);

    }
  }

我正在加载的组件在我的<iframe>中注册为一个route，我AppRouting.module像这样导航到它

export class MyComponent{

    URL = this.sanitize.bypassSecurityTrustResourceUrl('component-path');

    constructor(private sanitize: DomSanitizer,/*...*/){}

    /*......*/

}

在我的模板中，我只是添加[src]="URL"到<iframe>加载没有问题的标签中。

我可以从console.log()发送帖子的服务中看到，订阅按预期从状态发送更新，但是console.log()方法.onmessage永远不会触发。有谁看到到目前为止的问题是什么？

4

0 回答 0