2

我有两个组件，一个 videoComponent 和 videoControlsComponent。video 组件包含一个<video>元素，并且 video 组件具有一些按钮来操作 videoComponent<video>元素。

<video controls="{{ controls }}" [src]="streamUrl" #myVideo>
    Your browser does not support the video tag or the file format of this video.
</video>

视频组件：

@ViewChild('myVideo') myVideo: any;
public playVideo() {
    this.myVideo.nativeElement.play();
}

视频控制组件：

constructor(private videoComponent: VideoComponent) { }
public videoPlay() {
    this.videoComponent.playVideo()
}

问题是当我单击按钮时出现以下错误：Cannot read property 'nativeElement' of undefined at VideoControlsComponent.

但是当我有完全相同的代码但不是在 videoControlsComponent 而是在 videoComponent 中创建按钮时，一切正常。

你能帮帮我吗？

4

1 回答 1

4

您需要像使用带有videoComponent的“myVideo”一样使用@ViewChild，就像这样 @ViewChild(VideoComponent) videoComponent: VideoComponent

假设 videoComponent 是 videoControls 的孩子

如果他们是兄弟姐妹，您可以使用 @Output 在父级中触发事件，然后父级将更改设置为 videoControls 中输入的布尔值，然后在 videoControls 上设置 ngOnChanges 以检测该输入何时更改

或者您可以设置服务在它们之间进行通信。如果他们不是亲子关系，那可能是最简单的选择

组件之间通信的服务示例：

@Injectable()
export class MyService {
    private myFunctionCallSource = new Subject();

    myFunctionCalled$ = this.myFunctionCallSource.asObservable();

    callMyFunction(){
        this.myFunctionCallSource.next()
    }
}

在视频组件中

this.myService.myFunctionCalled$.subscribe(
    res => this.myVideo.nativeElement.play(),
    err => console.log('MyService error', err)
);

在 videoControlsComponent

this.myService.callMyFucnction()
于 2018-06-19T19:48:54.220 回答