Access viewchild from another component
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?
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的更多相关文章
- [Angular] @ViewChild read custom directive and exportAs
For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...
- [Angular] Difference between ViewChild and ContentChild
*The children element which are located inside of its template of a component are called *view child ...
- Angular 2 中的 ViewChild 和 ViewChildren
https://segmentfault.com/a/1190000008695459 ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfter ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- 登陆peoplesoft的时候显示信息
Signon Event Message Select selectPeopleTools, then selectUtilities, then selectAdministration, then ...
- eclipse中hibernate和mybatis中xml配置文件的没有标签提醒解决方法
当我们使用eclipse编写Mybatis或hibernate的xml文件时,面对众多标签的配置文件,却没有自动提醒,对于工作和学习都十分不方便. 之所以没有自动提醒,是因为dtd文件没有加载成功. ...
- hibernate学习(一)配置,导包
框架的作用 学过javaWeb基础的已经对web层 jsp servlet ,service 层 ,dao层的jdbc .DBUtils 有了很深的了解 并编写代码实现某种功能 为了提高开发 ...
- salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型
看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...
- Ionic2 渐变隐藏导航栏|标题栏
废话少说 直接上代码.... //导入需要用到的命名空间 ViewChild,Content import { Component, ViewChild } from '@angular/core'; ...
随机推荐
- Introduction - Supervised Learning
摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第一章<绪论:初识机器学习>中第3课时<监督学习>的视频原文字幕.为本人在视频学习过程中逐字逐句记 ...
- 【图像处理与医学图像处理】NV12与YV12的区别
用videoCapture和IAMStreamConfig拿到的支持的格式列表.发现支持2中图像格式,YV12和NV12.具体是怎么样的内存分布不知道.查了些文档.自己修改了几个图.看出了点端倪YV1 ...
- Java学习笔记-包,classpath,import,jar
这里介绍Java的包,classpath,import和jar 包(package) 对类文件进行分类管理 给类提供多层命名空间 写在程序文件的第一行 类名的全称的是 包名.类名 包也是一种封装形式 ...
- 最新 网龙网络java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.网龙网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了网龙网络公司.6.7月主要是做系统复习.项目复盘.Le ...
- kafka producer interceptor拦截器(五)
producer在发送数据时,会经过拦截器和序列化,最后到达相应的分区.在经过拦截器时,我们可以对发送的数据做进步的处理. 要正确的使用拦截器需要以下步骤: 1.实现拦截器ProducerInterc ...
- [转帖]IBM 开源 POWER 指令集架构
IBM 开源 POWER 指令集架构 https://www.solidot.org/story?sid=61791 新闻越短 事情越严重 IBM 破釜沉舟 OpenPOWER 联盟国产化披荆斩棘? ...
- vue中可以自定义动画的前缀
vue中可以自定义动画的前缀1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2"& ...
- F12的用法
F12在Web测试中十分重要,可以定位元素(UI自动化常用),查看网页响应时间/数据(定位BUG,测单页面响应时间→性能) Elements 点击这个按钮,将光标移至“Google”图片位置并点击,右 ...
- KeyValuePair<string, string>
; #region CUP Method /// <summary> /// 请求与响应的超时时间 /// </summary> static public int Timeo ...
- hdu 3364 高斯入门。。
扣了一个高斯的介绍 比较全面(来自http://blog.csdn.net/duanxian0621/article/details/7408887) 高斯消元法,是线性代数中的一个算法,可用来求解线 ...