Angular框架中的@Input()属性装饰器

1、前言

angular中，Input是属性装饰器，用来定义组件内的输入属性。在实际的开发中主要用于父组件向子组件传递数据。在项目初始化的时候，会解析整个组件树，数据从上向下传递。
封装一个公共的组件，这个组件可以简单去对外部传过来的数据进行加减。
子组件代码：

import { Component, Input, OnInit } 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']
})
export class AlarmComponent implements OnInit {

  @Input() number:number = 0;

  constructor() { }

  ngOnInit(): void {
  }

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

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

}

接着再在父组件中去使用子组件

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

@Component({
  selector: 'app-home',
  template: `
    <app-alarm [number]="num"></app-alarm>
  `,
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {
  num = 4;

  constructor() { }

  ngOnInit() { }
}

image.png

2、@Input('bindingPropertyName')

Input装饰器的参数是可选的，用来指定组件绑定属性的名称，如果没有指定，则默认@Input装饰器，装饰的属性名。

image.png

此时父组件在使用子组件的时候，传给子组件的属性必须是value，否则编译会出现报错。

    <app-alarm [value]="num"></app-alarm>

3、setter和getter

setter和getter是用来约束属性的设置和获取，它们提供了一些属性读写的封装，可以让代码更简洁，且更具有拓展性，通过使用setter和getter的方式，可以对类中的私有属性进行封装，能避免外界操作影响到该私有属性。

image.png

import { Component, Input, OnInit } 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 OnInit {

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

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

  get number() {
    return this._number;
  }

  constructor() { }

  ngOnInit(): void {
  }

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

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

}

4、ngOnChanges

当数据绑定输入属性的值发生变化的时候，angular将会主动的调用ngOnChanges方法，它会获得一个SimpleChanges对象，包含绑定属性的新值和旧值，主要用于监测输入属性的变化。

在@angular/core核心包中导入OnChanges和SimpleChanges

import { Component, Input, OnInit, OnChanges, SimpleChanges } 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']);
  }

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

  get number() {
    return this._number;
  }

  constructor() { }

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

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

}

需要注意的是手动的修改值是无法触发ngOnChanges方法的

因此，我们在父组件传值的时候，写一个定时装置，让其不断的更改传入的属性值。

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

@Component({
  selector: 'app-home',
  template: `
    <app-alarm [number]="num"></app-alarm>
  `,
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {

  num = 4;

  ngAfterViewInit() {
    setInterval(()=>{
      this.num += 10;
    },1000)
  }

  constructor() { }

  ngOnInit() {
    
  }

}

image.png

可以看到，不断打印出一个SimpleChange对象，对象中囊括了新的值与旧的值。