Question

我尝试使用@ViewChild以编程方式触发点击事件来调用名为open（）的函数我总是得到错误

Cannot read property 'close' of undefined

//组件

import {Component, OnInit, OnChanges, ViewChild, ElementRef} from '@angular/core';

export class CalendarComponent implements OnInit {

    // Material Design Float Button 
    // https://github.com/GustavoCostaW/ngc-float-button
    ngcFloatButtonData: Object = {
        direction: 'up',
        open:false,
        onToggle: function(): void {
            this.open = !this.open;
        },
        close: function(): void {
            this.open = false;
        }
    };

    public elementRef;
    @ViewChild('float-button') public floatButton: ElementRef;

    constructor(
      public dialog: MatDialog,
      public el: ElementRef,
    ) {

    }

   decrement(): void {
      // try to call the function close()
      this.floatButton.close();
   }

} // end

//组件html

 <ngc-float-button
        id="float-button"
        icon="add"
        color="#c0392b"
        class="ngc-float-button-container ngc-float-button-main-button"
        (click)="ngcFloatButtonData.onToggle()"
        [direction]="ngcFloatButtonData.direction">

Answer 1

请使用nativeElement，如

，而不是this.floatButton.close（）

this.floatButton.nativeElement.close();

HTML：

<ngc-float-button
        id="float-button"
        #float-button
        icon="add"
        color="#c0392b"
        class="ngc-float-button-container ngc-float-button-main-button"
        (click)="ngcFloatButtonData.onToggle()"
        [direction]="ngcFloatButtonData.direction">

但是我看不到你在哪里调用减量方法。

Answer 2

您可以告诉ViewChild注释只使用组件ComponentWhatever而不是ElementRef，它将使您更容易理解您调用的组件。

在HTML上使用除了id属性之外的#float-button这样的别名。

如果它仍然告诉你close（）方法不存在可能是因为它尚未初始化，请在调用方法之前检查初始化。

无法从Angular 4中的viewChild元素调用函数

2 个答案: