Question

我有两个组件，一个是videoComponent和videoControlsComponent。视频组件包含一个<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中创建按钮时，一切正常。

可以帮我吗？

Answer 1

您还需要像使用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()

从另一个组件访问viewchild

1 个答案: