Question

我正在通过其网站上的“您的第一个应用”部分来学习角度知识。

我有一个问题要问的是事件发射器。

父项（产品列表）：

<app-product-alerts
  [product]="product"
  (notify)="onNotify()">
</app-product-alerts>

onNotify()方法只会发出警报

子组件（产品警报）：

<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

子组件ts：

...
export class ProductAlertsComponent implements OnInit {

  @Input() product;
  @Output() notify = new EventEmitter();

...

}

我的问题是，在这里使用发射器有什么意义？子组件只有一项，特别是按钮。

为什么我们不能做以下事情：

<app-product-alerts
  [product]="product"
  (click)="onNotify()">
</app-product-alerts>

在这里引入发射器的目的是什么？

将点击侦听器附加到子组件是否错误？

Answer 1

默认情况下，在Angular中，您无法监听click组件，但是可以添加主机监听器

export class ProductAlertsComponent implements OnInit {

@HostListener("click") onClick(){
    console.log("User Click using Host Listener")
}

事件发射器的主要目的是将数据从子组件传递到父组件，而不仅仅是用于事件侦听器

Answer 2

EventEmitters为Subjects（您可以利用RxJS库），您可以传递一个布尔值作为参数来定义通信在默认情况下是同步还是异步。我使用事件绑定定义了从子组件到父组件的基本通信。

我的问题是，在这里使用发射器有什么意义？孩子组件只有一项，特别是一个按钮。

使用发射器的重点是您需要建立子级->父级通信类型。在子组件1元素中没什么大不了的，因为您可能正在定义某种类型的自定义行为，否则您可以在父组件中使用该按钮并使用click事件，但是Angular中组件的设计遵循Atomic Design模式对于组件，这就是为什么您尝试将组件尽可能地拆分的原因。

将点击侦听器附加到子组件是否错误？

第一个需要回答的问题是您要使用此侦听器完成什么。我要说的是，您需要看一下角度组件之间通信的基本类型。

将一个组件的引用传递给另一个组件
通过父组件进行通信
通过服务进行通信

当您了解角度分量通信的工作原理时，您将意识到侦听器可能不是最佳解决方案，并且当您了解所有情况时，您将能够使用最佳通信方式。

通过明智地使用，听众会非常有用。

祝你好运！

Answer 3

您的子组件可能缺少某些语法。您知道要发出的数据类型吗？例如，如果其为string，则您的子组件需要如下所示：

export class ProductAlertsComponent implements OnInit {

  @Input() product;
  @Output() notify = new EventEmitter<string>();

...

}

这是TypeScript的一部分，这就是我们所说的通用注释。

此处的notify是事件对象或称为EventEmitter的实例。我们可以使用它来触发将事件发送回父组件的事件。您的onNotify()方法可能应该包含在该ProductAlertsComponent类中，因为这似乎是您要从孩子向父级发送一些信息的地方。

export class ProductAlertsComponent implements OnInit {

  @Input() product;
  @Output() notify = new EventEmitter<string>();

  onNotify() {

  }

}

因此，在onNotify()内添加this.notify.emit（），然后在其中添加要传达的信息。

  export class ProductAlertsComponent implements OnInit {

  @Input() product;
  @Output() notify = new EventEmitter<string>();

  onNotify() {
    this.notify.emit();
  }

}

Angular事件发射器与单击侦听器

3 个答案: