Question

我对框架还很陌生，现在正在尝试掌握事件发射器。

所以我正在尝试做什么，并且基本上应该起作用：

我有一个子类，希望在数据更改时发出一个事件。

实现为：

@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")};

最后是Parents模板中的以下HTML代码：

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

根据我的研究，这应该可以解决问题，但是我看不到弹出父母控制台消息，这应该表明该事件已成功接收。

编辑：导入发光类：

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

Edit2：

好的，我知道了。以前，我的子类在构造函数中称为“ onDocumentArrayChange（）”函数，以传递在此处组装的数组。我做了同样的事情，但是在“ ngOnInit（）”函数中，结果使整个事情正常进行。我仍然不确定，为什么要这样解决。我怀疑这是因为ngOnInit（）的调用早于构造函数。如果有人知道了，让我知道。

Answer 1

为了模拟角度的事件侦听器，您需要两个组件。假设您在父组件中使用子组件的选择器，并且想在子组件的选择器上添加事件。您应按顺序执行的步骤：

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方法即可。现在该事件的所有订阅者都可以传递数据；

在子component.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对象的所有条件，但是这里只是传递在父组件中设置的数据。

我希望它对您有用。

EventListener不接收事件/角度

1 个答案: