假设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: 在父页面可以做相应的操作啦,比如页面跳转
}
}