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

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

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?

asked Jun 19 '18 at 19:34
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()

Access viewchild from another component的更多相关文章

  1. [Angular] @ViewChild read custom directive and exportAs

    For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...

  2. [Angular] Difference between ViewChild and ContentChild

    *The children element which are located inside of its template of a component are called *view child ...

  3. Angular 2 中的 ViewChild 和 ViewChildren

    https://segmentfault.com/a/1190000008695459 ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfter ...

  4. React.js Tutorial: React Component Lifecycle

    Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...

  5. 登陆peoplesoft的时候显示信息

    Signon Event Message Select selectPeopleTools, then selectUtilities, then selectAdministration, then ...

  6. eclipse中hibernate和mybatis中xml配置文件的没有标签提醒解决方法

    当我们使用eclipse编写Mybatis或hibernate的xml文件时,面对众多标签的配置文件,却没有自动提醒,对于工作和学习都十分不方便. 之所以没有自动提醒,是因为dtd文件没有加载成功. ...

  7. hibernate学习(一)配置,导包

    框架的作用 学过javaWeb基础的已经对web层 jsp  servlet   ,service  层  ,dao层的jdbc .DBUtils 有了很深的了解 并编写代码实现某种功能 为了提高开发 ...

  8. salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

    看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...

  9. Ionic2 渐变隐藏导航栏|标题栏

    废话少说 直接上代码.... //导入需要用到的命名空间 ViewChild,Content import { Component, ViewChild } from '@angular/core'; ...

随机推荐

  1. Introduction - Supervised Learning

    摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第一章<绪论:初识机器学习>中第3课时<监督学习>的视频原文字幕.为本人在视频学习过程中逐字逐句记 ...

  2. 【图像处理与医学图像处理】NV12与YV12的区别

    用videoCapture和IAMStreamConfig拿到的支持的格式列表.发现支持2中图像格式,YV12和NV12.具体是怎么样的内存分布不知道.查了些文档.自己修改了几个图.看出了点端倪YV1 ...

  3. Java学习笔记-包,classpath,import,jar

    这里介绍Java的包,classpath,import和jar 包(package) 对类文件进行分类管理 给类提供多层命名空间 写在程序文件的第一行 类名的全称的是 包名.类名 包也是一种封装形式 ...

  4. 最新 网龙网络java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.网龙网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了网龙网络公司.6.7月主要是做系统复习.项目复盘.Le ...

  5. kafka producer interceptor拦截器(五)

    producer在发送数据时,会经过拦截器和序列化,最后到达相应的分区.在经过拦截器时,我们可以对发送的数据做进步的处理. 要正确的使用拦截器需要以下步骤: 1.实现拦截器ProducerInterc ...

  6. [转帖]IBM 开源 POWER 指令集架构

    IBM 开源 POWER 指令集架构 https://www.solidot.org/story?sid=61791 新闻越短 事情越严重 IBM 破釜沉舟 OpenPOWER 联盟国产化披荆斩棘? ...

  7. vue中可以自定义动画的前缀

    vue中可以自定义动画的前缀1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2"& ...

  8. F12的用法

    F12在Web测试中十分重要,可以定位元素(UI自动化常用),查看网页响应时间/数据(定位BUG,测单页面响应时间→性能) Elements 点击这个按钮,将光标移至“Google”图片位置并点击,右 ...

  9. KeyValuePair<string, string>

    ; #region CUP Method /// <summary> /// 请求与响应的超时时间 /// </summary> static public int Timeo ...

  10. hdu 3364 高斯入门。。

    扣了一个高斯的介绍 比较全面(来自http://blog.csdn.net/duanxian0621/article/details/7408887) 高斯消元法,是线性代数中的一个算法,可用来求解线 ...