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对象，对象中囊括了新的值与旧的值。
网友评论