javascript - 从另一个组件访问viewchild

我有两个组件，一个是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>

videoComponent：

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

videoControlComponent：

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

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

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

你能帮帮我吗？

最佳答案

您也需要像使用videoComponent一样使用@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()
    }
}

在videoComponent中

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

在videoControlsComponent中

this.myService.callMyFucnction()

关于javascript - 从另一个组件访问viewchild，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50935728/

VIdeoComponent

javascript - 从另一个组件访问viewchild