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

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 上使用像 #float-button 这样的别名在 id 属性旁边。

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

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

Cannot call function from viewChild element in Angular 4

javascript

angular

viewchild