Question

当父组件中的特定时间到达时，我正在使用Angular 2和plyr.js在子组件中渲染youtube iframe。虽然这是第一次发生，但是当父组件中的数据实时更改时，它不会反映在子组件中div的属性绑定中。

父组件：

parent.component.html：

<app-home [video_link]="url"></app-home>

parent.component.ts：

ngOnInit(){
...
this.live
      .takeUntil(this.unsubscribe$)
      .subscribe(value => {
       ...
        this.url = value.url;
       ...
      }
      );
...
}

子组件：

child.component.html：

<div id="player" data-plyr-provider="youtube" [attr.data-plyr-embed-id]="id"></div>

child.component.ts：

  @Input video_link = '';
  id = '';

  ngOnChanges() {
    this.id = this.video_link;
  }

  ngOnInit() {
     this.id = this.video_link;
     this.player = new Plyr('#player', {
      autoplay: true,
      youtube: { autoplay: 1 }
    });
  }

错误：

zone.js:195 Uncaught TypeError: Cannot read property 'toString' of null
    at plyr.min.js:3
    at String.replace (<anonymous>)
    at Ue (plyr.min.js:3)
    at t.getTitle (plyr.min.js:3)
    at onReady (plyr.min.js:3)
    at O.q.P (www-widgetapi.js:296)
    at Z.q.I (www-widgetapi.js:569)
    at Z.q.aa (www-widgetapi.js:593)
    at Qe.i (www-widgetapi.js:368)
    at Ce.g (www-widgetapi.js:352)

我已经尝试过像<p>{{video_link}}</p>这样在html标记中简单地打印这些值，并且当父组件中的视频链接发生更改时它也会正确更改，所以我知道问题不在父辈传播。

有什么方法可以将此更改绑定到div属性？

角度2：@Input更改时，div上的属性绑定不会更改

0 个答案: