首页 文章

无法读取未定义的@ViewChild的属性，无法使用Angular 5

提问于
浏览 次
1

我有点麻烦我似乎无法弄清楚为什么我的 @ViewChild 无法正常工作..

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

Sidebar component

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：无法读取undefined的属性'sendData'

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

我不确定是什么问题？

EDIT

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

任何帮助，将不胜感激！

谢谢！

javascript angular typescript

3 回答

  • 1

    就像这次谈话的补充一样，我曾经几次追逐似乎缺乏功能的 @ViewChild ，原因是 @ViewChild 引用了一个未导入模块的组件 . "cannot read property of undefined"可能会变得极具误导性，可能根本与 @ViewChild 无关;一定要先检查你的进口 .

    回复于
  • 2

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

    <parent>
    <app-program-header>
    </app-program-header>
    <app-sidebar>
    </app-sidebar>
</parent>
    回复于
  • 2

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

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

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

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

相关问题