Question

很抱歉要问这个问题，因为以前已经提出过有关它的变体，但是我被困住了，无法找到这种情况的解决方案，并且找不到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）; 行时，在控制台中出现运行时错误，提示：错误TypeError：无法读取未定义的属性'onClick'。

Answer 1

Angular将“按钮”视为常规的html按钮，而不是自定义组件。您的选择器是

selector: 'app-button',

尝试使用

<app-button></app-button>

相反。

亲子互动互动

1 个答案: