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

假设parent.page.html里内嵌了自定义组件child.component.html,
我们可以通过EventEmitter和Output模块来实现事件的触发。

• child.component.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: 在父页面可以做相应的操作啦，比如页面跳转
    }
}