Angular框架中的Output属性装饰器

1、前言

Output属性装饰器主要是用来定义组件内的输出属性，来实现子组件将信息通过事件的形式通知到父级组件。

• EventEmitter：
  EventEmitter用来触发自定义事件的

let  numberEmitter: EventEmitter<number> = new EventEmitter<number>();

numberEmitter.subscribe((value:number)=>{ console.log(value) })；

numberEmitter.emit(10);

EventEmitter的实际开发应用场景：子指令创建一个EventEmitter实例，并将其作为输出属性导出，子指令调用已创建的EventEmitter实例中的emit(payload)方法来触发一个事件，父指令通过事件绑定(eventName)的方式监听该事件，并通过$event对象来获取payload对象。
子组件：

import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-alarm',
  template: `
    <button (click)="increment()"> + </button>
    <span style="margin:0 20px">{{ number }}</span>
    <button (click)="decrement()"> - </button>
  `,
  styleUrls: ['./alarm.component.less'],
  inputs: ['number:value']
})
export class AlarmComponent implements OnChanges {

  _number:number = 0; // 一般私有属性用下划线开头或者$开头

  /** 监测输入的属性值的变化 */
  ngOnChanges(changes: SimpleChanges): void {
    console.dir(changes['number']);
  }

  @Output() change: EventEmitter<number> = new EventEmitter<number>();

  @Input() 
  set number(num:number) {
    this._number = num; //将接收到的值进行赋值操作
  }

  get number() {
    return this._number;
  }

  constructor() { }

  increment():void {
    this.number++;
    this.change.emit(this._number);
  }

  decrement():void {
    this.number--;
    this.change.emit(this._number);
  }

}

父组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <p>子组件当前改变后的值：{{ data }}</p>
    <app-alarm [number]="num" (change)="handleChange($event)"></app-alarm>
  `,
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {

  num = 4;
  data = 0;

  ngAfterViewInit() { }

  constructor() { }

  ngOnInit() {
    
  }

  handleChange(e:any) {
    this.data = e;
  }

}

2、@Output('bindingPropertyName')

Output 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Output 装饰器，装饰的属性名。

import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-alarm',
  template: `
    <button (click)="increment()"> + </button>
    <span style="margin:0 20px">{{ number }}</span>
    <button (click)="decrement()"> - </button>
  `,
  styleUrls: ['./alarm.component.less'],
  inputs: ['number:value']
})
export class AlarmComponent implements OnChanges {

  _number:number = 0; // 一般私有属性用下划线开头或者$开头

  /** 监测输入的属性值的变化 */
  ngOnChanges(changes: SimpleChanges): void {
    console.dir(changes['number']);
  }

  @Output('countChange') change: EventEmitter<number> = new EventEmitter<number>();

父组件的调用的自定义事件名进行替换成countChange

@Component({
  selector: 'app-home',
  template: `
    <p>子组件当前改变后的值：{{ data }}</p>
    <app-alarm [number]="num" (countChange)="handleChange($event)"></app-alarm>
  `,
  styleUrls: ['./home.component.less']
})

3、实时监听数据的变化

在子组件的number值发生变化时的时候，同步的去更新父组件的值，可以使用change事件去进行监听。
父组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <p>子组件当前改变后的值：{{ num }}</p>
    <app-alarm [number]="num" (countChange)="num = $event"></app-alarm>
  `,
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {

  num = 4;

  ngAfterViewInit() { }

  constructor() { }

  ngOnInit() {
    
  }

}

子组件：

import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-alarm',
  template: `
    <button (click)="increment()"> + </button>
    <span style="margin:0 20px">{{ number }}</span>
    <button (click)="decrement()"> - </button>
  `,
  styleUrls: ['./alarm.component.less'],
  inputs: ['number:value']
})
export class AlarmComponent implements OnChanges {

  _number:number = 0; // 一般私有属性用下划线开头或者$开头

  /** 监测输入的属性值的变化 */
  ngOnChanges(changes: SimpleChanges): void {
    console.dir(changes['number']);
  }

  @Output('countChange') change: EventEmitter<number> = new EventEmitter<number>();

  @Input() 
  set number(num:number) {
    this._number = num; //将接收到的值进行赋值操作
  }

  get number() {
    return this._number;
  }

  constructor() { }

  increment():void {
    this.number++;
    this.change.emit(this._number);
  }

  decrement():void {
    this.number--;
    this.change.emit(this._number);
  }

}