Невозможно вызвать функцию из элемента viewChild в Angular 4 - PullRequest
Новая
       13

Невозможно вызвать функцию из элемента viewChild в Angular 4

0 голосов
/ 15 мая 2018

Я пытаюсь вызвать событие щелчка программно, используя @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">

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Вы можете указать аннотации ViewChild просто взять компонент ComponentWh независимо от ElementRef, вам будет проще понять, какой компонент вы вызываете.

А в HTML используйте псевдоним, такой как # float-button, кроме свойства id.

Если он все еще говорит вам, что метод close () не существует, возможно, причина в том, что он еще не инициализирован, проверьте инициализацию перед вызовом метода.

0 голосов
/ 15 мая 2018

Вместо this.floatButton.close (), пожалуйста, используйте nativeElement, например 

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">

Но я не смог увидеть, где вы вызываете метод декремента.

...