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'; ...
随机推荐
- codevs 1048/洛谷 1880:石子归并
题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1].问安排怎样的合并顺序,能够使 ...
- 前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)
注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...
- 将neo4j的一个节点上的关系移动到另一个节点上
将neo4j中一个节点的全部关系移动到另一个节点上面,采用先建立新关系,之后删除原先的关系的方式 def move_relations(source_node_id,target_node_id,gr ...
- jenkins持续集成(windows slave+svn+.net)
一.Windows slave配置 1.系统管理->节点管理->新建节点 2.节点列表中点击新增的节点名称按提示下载agent.jar, 在windows slave机器执行(copy页面 ...
- 2019HDU暑期多校训练-1004equation-方程求解
Description You are given two integers N,C and two integer sequences a and b of length N. The sequen ...
- Numpy学习之——数组创建
Numpy学习之--数组创建 过程展示 import numpy as np a = np.array([2,3,9]) a array([2, 3, 9]) a.dtype dtype('int32 ...
- Python_oneday
基本程序设计 一切代码输入,请使用英文输入法 编写一个简单的程序 圆公式面积: area = radius * radius * 3.1415 在Python里面不需要定义数据的类型 控制 ...
- python基础(十)--函数进阶
嵌套函数 >>> graphic = '三角形' >>> def chang(): graphic = '正方形' def chang1(): #内部嵌套的函数命名 ...
- xpath的一些常用使用
xml文档<html> <head> <title>My page</title> </head> <body> <h2& ...
- Go语言操作NoSql
NSQ平台 NSQ是目前比较流行的一个分布式的消息队列,本文主要介绍了NSQ及Go语言如何操作NSQ. NSQ NSQ介绍 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优异. N ...