父组件通过自定义属性给子组件传值
@Input: 用来接收父组件传递的内容,当要在父组件中绑定到子组件中的属性(即方括号中的内容)时,必须在子组件中使用 @Input() 来装饰该属性.
要监视 @Input() 属性的更改,使用 Angular 的生命周期函数OnChanges 。具体用法参考https://blog.csdn.net/weixin_39150852/article/details/105049985
@Output: 采用事件驱动,用来触发父组件的方法,并传递数据给父组件,@Output() 要和 EventEmitter 配合使用,EventEmitter 是 @angular/core 中的一个类,用于发出自定义事件。
1、定义子组件
html代码(这里使用了Ant Design Mobile的组件):
<Navbar [leftContent]="'返回'"
[icon]="icon"
[rightContent]="null"
(onLeftClick)="onLeftClick()">
{{name}}
</Navbar>
<div class="setHeight"></div>
<ng-template #icon>
<Icon [type]="'left'"></Icon>
</ng-template>
ts代码
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Component({
selector: 'app-nav-header',
templateUrl: 'nav-header.page.html',
styleUrls: ['nav-header.page.scss'],
})
export class NavHeaderPage {
@Input() name; //头部标题
@Output() reback = new EventEmitter<any>(); // reback :实例化对象
public onLeftClick() {
//通过emit给父组件广播数据
this.reback.emit(‘欲传递的内容’);
}
}
module.ts代码
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular';
import {FormsModule} from '@angular/forms';
import {NgZorroAntdMobileModule} from 'ng-zorro-antd-mobile';
import {NavHeaderPage} from './nav-header.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
NgZorroAntdMobileModule
],
declarations: [NavHeaderPage],
exports: [NavHeaderPage]
})
export class NavHeaderModule {
}
2、父组件调用
html代码:
<app-nav-header [name]="titleName" (reback)="onClose($event)"></app-nav-header>
js代码:
import {Component, EventEmitter, Input, Output} from '@angular/core';//导入模块
@Component({
selector: 'app-data-list',
templateUrl: 'dataList.page.html',
styleUrls: ['dataList.page.scss'],
})
export class DataListPage {
public titleName = '预传递给子组件的标题名';
constructor() {
}
//被子组件触发的方法
onClose(e) {
// e:子组件给父组件广播的数据
}
}
module.ts代码
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular';
import {FormsModule} from '@angular/forms';
import {DataListPage} from './dataList.page';
import {NavHeaderModule} from '../nav-header/nav-header.module'; //导入子组件模块
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
NavHeaderModule
],
declarations: [DataListPage],
exports: [DataListPage]
})
export class DataListModule {
}