我遇到了一点麻烦,我似乎不明白为什么我的@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
}
}
- 标题.组件. 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() {
}
}
- 标题.组件. html**
<div (click)="sidebar.sendData()"></div>
但是它不起作用,我在控制台中得到这个错误...
错误类型错误:无法读取未定义的属性"sendData"
- 为简洁起见,我已删除代码,如果您需要更多信息,请告诉我 *
我不知道是什么问题?
- 编辑**
或者,如果有人知道另一种从单独组件调用函数的方法,请告诉我
任何帮助将不胜感激!
谢谢!
4条答案
按热度按时间jbose2ul1#
ViewChild
预期用于从当前组件的视图(模板)中获取与选择器匹配的目标元素。但是根据您上面的评论,似乎没有
app-sidebar
放置在您的header.component.html
中,因此ViewChild
无法获得有效的元素,这导致了您当前的错误。溶液应至少放置
app-sidebar
一次。xqkwcwgp2#
如果header和sidebar组件是兄弟,你不能直接在它们之间传递数据。从Angular 看一下“Output”和“Input”。或者,你可以使用一个Service在组件之间传递数据。查看服务和观察对象。
lsmd5eda3#
作为这次谈话的补充,我曾有过几次被要求去寻找
@ViewChild
功能的缺失,原因是@ViewChild
引用了模块中未被导入的组件。“无法读取未定义的属性”可能会产生极大的误导,并且可能根本与@ViewChild
无关;请务必先检查您的导入。bweufnob4#
在我的例子中,是从“@shared”导入导致了这个问题。你必须注意,你正在使用的@ViewChild组件引用不在同一个模块中,并且没有相同的速记路径。如果是这样,请从“shared/components/sidebar/sidebar.component”而不是"@shared“导入@ViewChild组件