angular - Angular 9 - 事件发射器不发射

Question

我正在尝试使用事件发射器将数据从表单组件传递到模态组件。以下是我如何配置它 -

表格.ts

@Output() userEmail = new EventEmitter;

submit(order): void {
this.userEmail.emit(order.value.email);
console.log('1', order.value.email);
this.orderForm.postOrderForm(order.value);
this.openOrderFormModal();
}

表单-modal.html

<div id="order-form-modal">
    <h3>{{ 'order.form.notify.heading.1' | translate }} </h3>
    <p> {{ 'order.form.notify.msg.1' | translate }}</p>
    <p> {{ 'order.form.notify.msg.2' | translate }}</p>
    <p (userEmail)="setEmail($event)">{{email}}</p>
    <button (click)="closeOrderFormModal()" class="btn btn-outline-primary">Close</button>
</div>

表单 Modal.ts

email;
setEmail(userEmail:string) {
this.email=userEmail
console.log(userEmail)
}

下面是我得到的输出：

我的Form Module如下-Form(Folder) Form.html Form.ts Form-Modal(Folder) Form-Modal.html Form-Modal.ts 请帮忙。如果您需要更多信息，请告诉我。

谢谢！阿迪亚普拉卡什

Answer 1

你用错了——

<p (userEmail)="setEmail($event)">{{email}}</p>

您不能将在组件上创建的自定义 EventEmitter 用作 HTML 元素上的指令。

用法是，考虑父子组件 -

@Component({
  selector: 'app-child',
  template: ` ... some template .....   `
})
class ChildComponent {

  @Output() userEmail = new EventEmitter();         <-------------- Also, EventEmitter is a class. You need to create an instance of it

  submit(order): void {
      this.userEmail.emit(order.value.email);
   }
}

您可以在父组件中监听 userEmail 事件 -

@Component({
  selector: 'app-parent',
  template: ` <app-child (userEmail)="emailChanged($event)"></app-child>  `
})
class ParentComponent {
  emailChanged(userEmail:string) {
    console.log(userEmail)
  }
}