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. codevs 1048/洛谷 1880:石子归并

    题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1].问安排怎样的合并顺序,能够使 ...

  2. 前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)

    注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...

  3. 将neo4j的一个节点上的关系移动到另一个节点上

    将neo4j中一个节点的全部关系移动到另一个节点上面,采用先建立新关系,之后删除原先的关系的方式 def move_relations(source_node_id,target_node_id,gr ...

  4. jenkins持续集成(windows slave+svn+.net)

    一.Windows slave配置 1.系统管理->节点管理->新建节点 2.节点列表中点击新增的节点名称按提示下载agent.jar, 在windows slave机器执行(copy页面 ...

  5. 2019HDU暑期多校训练-1004equation-方程求解

    Description You are given two integers N,C and two integer sequences a and b of length N. The sequen ...

  6. Numpy学习之——数组创建

    Numpy学习之--数组创建 过程展示 import numpy as np a = np.array([2,3,9]) a array([2, 3, 9]) a.dtype dtype('int32 ...

  7. Python_oneday

    基本程序设计 一切代码输入,请使用英文输入法   编写一个简单的程序 圆公式面积: area = radius * radius * 3.1415   在Python里面不需要定义数据的类型   控制 ...

  8. python基础(十)--函数进阶

    嵌套函数 >>> graphic = '三角形' >>> def chang(): graphic = '正方形' def chang1(): #内部嵌套的函数命名 ...

  9. xpath的一些常用使用

    xml文档<html> <head> <title>My page</title> </head> <body> <h2& ...

  10. Go语言操作NoSql

    NSQ平台 NSQ是目前比较流行的一个分布式的消息队列,本文主要介绍了NSQ及Go语言如何操作NSQ. NSQ NSQ介绍 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优异. N ...