Question

我们正在开发一个通过玩家显示相机流的项目。我们可以从db添加或删除摄像机信息，并根据组件的页面显示播放器。

我们的问题是，在ngOnInit（）部分，它订阅了Web服务并获取了摄像机记录并创建了玩家。

  ngOnInit(): void {

    videojs.options.flash.swf = '../video-js.swf';

    // videojs("streamPlayer").ready(function(){     
    //     var myPlayer:Player = this;
    //   });

    this.restervice.getCamList()

      .then(
      streams => {


        this.zone.run(() => {

          this.cameras = streams;



          if (streams.length != 0)
            console.log('result: ' + this.cameras[0].rtspUrl);




          setTimeout(() => {

            for (this.i = 0; this.i < this.cameras.length; this.i++) {
              console.log("Camera " + ((this.i) + 1) + " :" + this.cameras[this.i].name);

              this.videoJSplayer = videojs(this.cameras[this.i].name, {


                responsive: true, width: 600, height: 400,
                techOrder: ['flash'],

                sources: [{
                  src: 'rtmp://' + this.serverAddr + '/IPCamera/' + this.cameras[this.i].name,
                  type: 'rtmp/flv',
                  label: 'Flash'
                }],
                flash: {
                  swf: '../video-js.swf'
                }
              });
            }
          }, 500);
        });

      },

      error => {
        console.log('!!!Error!!! ' + error);
      },


    );

  }

另一个组件向db添加新的摄像机记录，我们希望刷新显示页面播放器的dom元素，换句话说创建新的播放器或通过刷新组件而不是整页来删除。

如果我们调用refreshDom（）函数

  refreshDom():void {
    this.ngOnDestroy();
    this.ngOnInit();
  }

从它自己的组件，它成功刷新dom元素（删除和添加），但如果我们从我们执行db操作的其他组件调用它，它采取组件的实例但它不能执行操作，因为我们不能采取工作实例它可能会创建另一个实例。

  this.restervice.addCameraInfo(this.cam).subscribe(
  streams => {
    console.log('result!!!: ' + streams.success);
    if(streams.success==true){

    this.dialogRef.close(Camera);
    this.verify=true;
    this.playlive.refreshDom();            
    }

我们尝试了经典实例创建，采用ComponentRef或nGzone解决方案，但它们不起作用？

如何在Angular2中访问不同组件的工作实例？

0 个答案: