Angular在父组件和一个或多个子组件之间共享数据： @Input() 和 @Output()

迈不过友情╰ 2022-09-07 12:22 113阅读 0赞

**在Vue中父子组件传值用的是：props和$emit。  
Angular中的@Input() 和 @Output()和它有异曲同工之妙。**

*  @Input() 和 @Output() 为子组件提供了一种与其父组件通信的方法。
 *  @Input() 允许父组件更新子组件中的数据。相反，@Output() 允许子组件向父组件发送数据。
 *  子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。
 *  要想`监视` @Input() 属性的变化，你可以使用 Angular 的生命周期钩子`OnChanges`。
 *  子组件使用 @Output() 属性来引发事件，以通知父组件这一变化。为了引发事件， @Output() `必须是 EventEmitter` 类型，它是 @angular/core 中用来发出自定义事件的类。

1.  要使用 @Input() 和@Output() 装饰器，首先要导入 Input和Output。示例代码如下：

import {  Input, OnInit, EventEmitter, Output, OnChanges } from "@angular/core";

1.  在组件类中，用 @Output() 和@Input()装饰一个属性。示例代码如下：

@Component({ 
        selector: 'app-rule-pup',
        templateUrl: './index.html',
        styleUrls: ['./index.less']
    })
    export class RulePupComponent implements OnInit,OnChanges { 
      @Input() data: any;//接收父组件的值
      @Input() projectId:number = 1 // 1:保存 2:编辑
      @Input() pupShow //添加弹框显示隐藏字段
      @Output() changeRule = new EventEmitter<object>();
    }

注意：上面的例子中changeRule这两个 @Output() 的类型为 EventEmitter ，这意味着它是一个事件。

1.  在父组件中使用。示例代码如下：

<app-rule-pup [data]="ruleEditData" [projectId]="projectid" [(pupShow)]="editShow" (changeRule)="getRule()"></app-rule-pup>

更多可参考[Angular官网——在父子指令及组件之间共享数据][Angular]

[Angular]: https://angular.cn/guide/inputs-outputs