Ionic4基于Angular实现自定义component的事件触发

假设parent.page.html里内嵌了自定义组件ponent.html,

我们可以通过EventEmitter和Output模块来实现事件的触发。

ponent.ts

import {Component, EventEmitter, Output } from '@angular/core';@Component({selector: 'app-child',template: `<ion-button class='btn btn-primary' (click)="onClick()">测试</ion-button> `})export class ChildComponent {@Output() valueChange = EventEmitter<string>();counter = 0;onClick() {this.counter = this.counter + 1;// 发送事件数据this.valueChange.emit(this.counter);}}

parent.conponent.ts

import {Component, OnInit } from '@angular/core';@Component({selector: 'app-parent',template: `<app-child (valueChange)='onChange($event)'></app-child>`})export class ParentComponent implements OnInit {ngOnInit() {}// 接收valueChange事件发送过来的数据onChange(count) {console.log(count);// TODO: 在父页面可以做相应的操作啦，比如页面跳转}}