angular父子组件间通信之@Input()和@Output()

父组件通过自定义属性给子组件传值

@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 {
     
    }