无法读取未定义 @ViewChild 的属性无法正常工作 Angular 5

Question

我遇到了一些麻烦，我似乎无法弄清楚为什么我的@ViewChild 不起作用..

基本上我想从另一个组件调用一个组件中的函数，所以在我的sidebar 组件中我有一个名为sendData() 的函数，我希望能够通过单击我的header 组件中的按钮调用它所以我所做的是..

侧边栏组件

 import { Component, OnInit, Input, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';

import * as _ from 'lodash';


@Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit, OnChanges {

constructor(
    private contenfulService: ContentfulService,
    private userService: UserService
) { }

ngOnInit() {

}

sendData(){
    ...do something
}
}

header.component.ts

 import { Component, OnInit, Input, ViewChild, EventEmitter } from '@angular/core';
 import { UserService } from '../../../user.service';
 import { SidebarComponent } from '../sidebar/sidebar.component';

 @Component({
   selector: 'app-program-header',
   templateUrl: './program-header.component.html',
   styleUrls: ['./program-header.component.scss']
 })

 export class ProgramHeaderComponent implements OnInit {
 @ViewChild(SidebarComponent) sidebar;

    constructor() { }

    ngOnInit() {

    }
 }

header.component.html

<div (click)="sidebar.sendData()"></div>

但它不起作用我在控制台中收到此错误...

ERROR TypeError: Cannot read property 'sendData' of undefined

为简洁起见，我删除了代码，如果您需要更多信息，请告诉我

我不确定是什么问题？

编辑

或者如果有人知道从单独的组件调用函数的另一种方法，请告诉我

任何帮助将不胜感激！

谢谢！

Answer 1

ViewChild 预计用于从当前组件的视图（模板）中获取与选择器匹配的目标元素。

但是根据您上面的评论，您的header.component.html 中似乎没有放置app-sidebar，因此ViewChild 无法获取导致您当前错误的有效元素。

解决方案应至少放置一次app-sidebar。

<app-sidebar></app-sidebar>
<div (click)="sidebar.sendData()"></div>

Answer 2

作为这次谈话的补充，我有几次被困在寻找似乎缺乏功能的@ViewChild，而原因是@ViewChild引用了一个模块中的一个组件，该组件是不被进口。 “无法读取未定义的属性”可能会变得极具误导性，并且可能与@ViewChild 完全无关；请务必先检查您的导入。

Answer 3

如果标题和侧边栏组件是兄弟组件，则不能在它们之间直接传递数据。从角度看一下“输出”和“输入”。或者，您可以使用服务在组件之间传递数据。查看服务和可观察的。

<parent>
    <app-program-header>
    </app-program-header>
    <app-sidebar>
    </app-sidebar>
</parent>