https://stackoverflow.com/questions/50935728/access-viewchild-from-another-component

=================

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

I have two components, one videoComponent and videoControlsComponent. The video component contains a <video> element and the video component has some buttons to manipulate the videoComponent <video> element.

<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() }

The problem is that when I click the button I get the following error: Cannot read property 'nativeElement' of undefined at VideoControlsComponent.

But when I have exactly the same code but create the button not in the videoControlsComponent but videoComponent everything works fine.

Can you help me out please?

javascript  Access viewchild from another component 随笔 第1张angular share edit asked  Jun 19 '18 at 19:34 Access viewchild from another component 随笔 第2张 Lil jonson 111 add a comment

1 Answer

active oldest votes 2

you need to use @ViewChild like you did with "myVideo" with videoComponent as well so like this @ViewChild(VideoComponent) videoComponent: VideoComponent

that's assuming videoComponent is a child of videoControls

if they are siblings you can use @Output to trigger an event in the parent, the parent would then change a boolean that is set to an input in videoControls and then set up ngOnChanges on videoControls to detect when that input changes

or you can set up a service to communicate between them. That might be the easiest option if they are not a parent-child relationship

Example of a Service to communicate between components:

@Injectable() export class MyService { private myFunctionCallSource = new Subject(); myFunctionCalled$ = this.myFunctionCallSource.asObservable(); callMyFunction(){ this.myFunctionCallSource.next() } }

in videoComponent

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

in videoControlsComponent

this.myService.callMyFucnction()
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄