这是一个关于如何检测@input变化的简短教程。
@input 是一个Angular装饰器，它可以帮助我们对一个输入进行属性绑定。
因此，输入的名字意味着它是一个传递给组件的输入数据。
@input 它将元数据添加到angular组件中，用于属性绑定，并允许将其添加到DOM元素中。
@input directive 用在以下方面
- 将数据从子节点传递给父节点，反之亦然
- 将数据作为输入传递给组件
@input 是一个来自 模块的指令，所以你必须导入才能在Angular组件中使用。@angular/core
让我们在Angular中声明一个组件input-binding.component.ts。
并把输入数据传给这个组件
比如说
<input-binding data="Welcome Cloudhadoop"></input-binding>
如何在Angular组件中检测@input的变化？
我们有多种方法来检测变化
使用ngOnChanges绑定作为单程绑定
ngOnChanges是一个组件的生命周期方法，每当输入属性的数据发生变化时，它就会被调用。
它接受来自@angular/core模块的SimpleChanges 类。SimpleChanges持有输入属性的当前值和前值。
ngOnChanges(changes: SimpleChanges) :void {
}
下面是一个例子
import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
@Component({
selector: 'input-binding',
templateUrl: './input-binding.component.html',
styleUrls: ['./input-binding.component.css']
})
export class InputBindingComponent implements OnInit {
@Input() data:String;
ngOnChanges(changes: SimpleChanges) {
// get Current Value
let currentVal = changes.data.currentValue;
// get Previous Value
let previousVal = changes.previousValue;
}
constructor() {}
ngOnInit() {}
}
Html组件
<h1>
Input input-binding example
</h1>
<div>
{{data}}
</div>
这个组件可以用在任何其他组件或模块中。
<input-binding data="Welcome user"></input-binding>
当你用ngOnChanges 方法来检测所有的变化时，这种方法就会被使用，并且它持有当前和之前的值，你可以对它进行比较。
输入属性setter和getter方法
如果你有简单的输入变化，我们可以使用这种方法，而且使用这种方法非常简单。
- 提供输入属性，并为其设置设置器和获取器。
import {
Component,
Input,
OnInit,
SimpleChanges
} from '@angular/core';
@Component({
selector: 'input-binding',
templateUrl: './input-binding.component.html',
styleUrls: ['./input-binding.component.css']
})
export class InputBindingComponent implements OnInit {
private _name: string;
@Input() set name(value: string) {
this._name = value;
}
get name(): string {
return this._name;
}
constructor() {}
ngOnInit() {}
}
可以使用组件，如下所示
<input-binding name="Welcome Cloudhadoop"></input-binding>
