父组件监听子组件中的事件

  • 封装组件时保留组件是事件

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component, EventEmitter, Output } from "@angular/core";
@Component({
  selector: 'app-wechat-code',
  templateUrl: './wechat-code.component.html',
  styleUrls: ['./wechat-code.component.css']
})
export class WechatCodeComponent {
  // 组件暴露出的方法
  @Output() onOk = new EventEmitter<boolean>()
  ok(confirm: boolean) {
    // 将需要的参数传个父组件
    this.onOk.emit(confirm)
  }
}

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component } from "@angular/core";
@Component({
  selector: 'app-footer',
  template: `
  /* 调用子组件中的方法，响应子组件事件($event) */
  <app-wechat-code (onOk)="onOk($event)"></app-wechat-code>
  `
})
export class FooterComponent {
  // 响应子组件事件($event)
  onOk(ok: boolean) {
    console.log('ok', ok);
  }
}