EventListener не принимает Event / Angular - PullRequest
Новая
       11

EventListener не принимает Event / Angular

0 голосов
/ 07 апреля 2019

Я довольно плохо знаком с фреймворком и сейчас пытаюсь разобраться в Event Emitters.

Итак, что я пытаюсь сделать и что в основном должно работать:

У меня есть этот дочерний класс, который хочет генерировать событие при каждом изменении данных.

Реализовано с: 

@Output() docArrayChanged = new EventEmitter<any>();

и 

onDocumentArrayChange(){
this.docArrayChanged.emit(this.documentArray)
console.log("onDocumentArrayChange Event emitted")
}

в моем родительском классеУ меня есть: 

recieveChangedDocumentArray($event){
this.documentList = $event
console.log("event recieved")};

и, наконец, этот HTML-код в шаблоне для родителей: 

<app-document-data
(docArrayChanged)="recieveChangedDocumentArray($event)">
</app-document-data>

Согласно моим исследованиям это должно сработать, но я не вижу сообщения консоли родителейвсплывающее окно, которое должно указывать на успешное получение события.

Редактировать: импортировать в исходящий класс: 

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

Редактировать2:

Хорошо, все получилось,Ранее мой дочерний класс вызывал функцию «onDocumentArrayChange ()» в конструкторе, чтобы передать массив, который был собран там.Я сделал то же самое, но в функции "ngOnInit ()", которая, как оказалось, заставляет все это работать.Я все еще не совсем уверен, почему это было решением.Я подозреваю, что это потому, что ngOnInit () вызывается раньше, чем конструктор.Если у кого-то есть подсказка, дайте мне знать.

1 Ответ

0 голосов
/ 07 апреля 2019

Для того, чтобы смоделировать прослушиватель событий в угловых, вам нужно два компонента. Представьте, что вы используете селектор дочернего компонента в родительском компоненте и хотите добавить событие в селектор дочернего компонента. шаги, которые вы должны выполнить по порядку:

1 - добавьте @Output в дочерний файл component.ts. Затем вы пишете имя события и вам следует присвоить его классу EventEmitter.

в дочернем компоненте: 

          @Output change = new EventEmitter()

тогда в дочернем компоненте у вас есть метод, который в этом методе должен генерировать событие. представьте, что у нас есть звезда, которая, нажав на нее, делает пустую звезду. Хорошо! нет в дочернем компоненте у нас есть: 

     onClick(){
         this.change.emit();
           ///do other code

  }

тогда вы можете использовать имя изменения как событие в теге селектора дочернего компонента в родительском компоненте.

в родительском html: 

      <child (change)="doSomeThing()"></child>

в родительском файле TS: 

     doSomeThing(){

         console.log('i am in parent');
      }

Теперь, если вы хотите передать данные, это действительно просто. просто перейдите к дочернему компоненту и передайте аргумент в методе emit. теперь все подписчики этого события могут передавать данные;

в дочернем компоненте.ts 

     onClick(){
         this.change.emit(arg);
           ///do other code

       }

Теперь перейдите в родительский component.ts: 

        doSomeThing(data){

         console.log('i am in parent' , data);
      }

последний шаг: перейти к родительскому html и в качестве параметра для события вы должны передать $ event. 

      <child (change)="doSomeThing($event)"></child>

В общем случае $ event передает все условия об объекте DOM, но здесь просто передаются данные, которые установлены в родительском компоненте.

Я надеюсь, что это полезно для вас.

...