【发布时间】：2018-08-09 07:01:00
【问题描述】：
我很抱歉问这个问题，因为之前有人问过它的变体，但我被困住了，无法找到解决这种情况的方法，也找不到 Angular Material 文档有帮助。
我正在使用一个 Angular Material 按钮，并尝试从我的应用组件中调用它。
这是我的应用组件代码：
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ButtonComponent } from './components/button/button.component';
import { MatTooltip} from '@angular/material'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'replace-services-project';
@ViewChild(ButtonComponent) buttonComponent:ButtonComponent
onClick(text:string){
this.buttonComponent.onClick(text);
}
}
这是我的应用组件模板
<div style="text-align:center">
<div class="button-row">
<button mat-raised-button matTooltip="Info about the action" color="primary" (click)="onClick('First Button')">
First Button
</button>
</div>
</div>
这是我的按钮组件：
import { Component, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.css']
})
export class ButtonComponent {
onClick=(text:string)=>{
console.log(text);
}
constructor() { }
}
当我到达 this.buttonComponent.onClick(text); 行时，控制台中出现运行时错误：ERROR TypeError: Cannot read property 'onClick' of undefined。
【问题讨论】：
-
好吧，您的模板中没有任何
。那么@ViewChild(ButtonComponent) 怎么能找到按钮组件呢？ -
@kickinchicken 为什么要写这样的方法：onClick=(text:string)=>{...} 而不是 onClick(text: string) {...} 有什么好处吗？
-
@JBNizet - 材料组件的文档说这是它的工作方式。
-
@josip：我最初尝试过，但也无法使用该方法。
-
不，他们没有。如果组件选择器是 app-button，如果模板中有
元素，它将被创建。这是基本的 Angular 东西。如果您认为角度材料另有说明，请指向特定的文档，以便我们向您解释。