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：无法读取属性＆＃39; sendData＆＃39;未定义的

我已经删除了代码以简洁，所以如果您需要更多信息，请告诉我

我不确定问题是什么？

修改

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

任何帮助将不胜感激！

谢谢！

Answer 1

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

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

Answer 2

预计

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

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

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

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

Answer 3

作为这次对话的补充，我几次被追捕，原因是@ViewChild引用了其中的一个组件，而似乎缺少一个@ViewChild的功能未导入的模块。 “无法读取未定义的属性”可能会极具误导性，并且可能与@ViewChild根本无关。请务必先检查您的进口。

无法读取未定义的@ViewChild属性不起作用Angular 5

3 个答案: