如何检测Angular中@Input()值何时更改（）

@Input()基本上是一个装饰器, 用于将属性绑定为输入。它用于传递数据, 即从一个组件到另一个组件的属性绑定, 或者可以说, 从父组件到子组件。它与DOM元素绑定。更改DOM元素值时, Angular会使用更改后的值自动更新此属性。在这里, 我们将看到如何使用它。
方法：
@Input()可以通过两种方式使用：
使用@Input()进行双向绑定
与ngOnChange()和@Input()的单向绑定
首先, 我们将研究双向绑定。
双向绑定使用ngModel指令以单个表示法组合输入和输出。双向绑定的表示法是[()]。
这是我们将实现双向绑定的方法。我们有一个组件FormComponent(父)和ChildComponent(子)。当用户在父组件的文本输入字段中输入任何内容时, 子组件会检测到它。

Implementation of Two-way binding:

在这里, 我们将创建一个父组件并将其添加子组件。
form.component.html

< div style="border: 1px solid rgb(46, 93, 194); height: 25vh; width: 35vw; padding: 10px 10px; margin: 20px; " > < b > Type here : < / b > < input type = "text" [(ngModel)]='text' /> < child [message]='text'> < / child > < / div >

在子组件中, 我们传递了一个属性'信息'它使用ngModel保留输入元素绑定的值。这是FormComponent类：
form.component.ts

import { Component, OnInit } from '@angular/core' ; @Component({ selector: 'app-form' , templateUrl: './form.component.html' , styleUrls: [ './form.component.scss' ] }) export class FormComponent implements OnInit {constructor() { }ngOnInit(): void { } public text : string; }

此更改将反映在子组件中。 "消息"将在此处显示。这是该代码：
child.component.html

< div style="border:1px solid rgb(53, 71, 131); width:30vw; height: 12vh; padding: 10px 10px; margin:20px"> < h4 > You entered < span > {{message}}< / span > < / h4 > < / div >

在ChildComponent类中, 我们将导入Input以便检测来自FormComponent类的消息。
child.component.ts

import { Component, OnInit, Input } from '@angular/core' ; @Component({ selector: 'child' , templateUrl: './child.component.html' , styleUrls: [ './child.component.scss' ] }) export class ChildComponent {//message will detect the input from FormComponent. @Input() message:string; constructor() { } }

这都是关于双向绑定的。现在, 让我们看看如何使用单向绑定。

Implementation of One-way binding with ngOnChange() and @Input():

这是我们将使用ngOnChange()绑定输入的方式。 childComponent的代码将与双向绑定的情况相同。但是, FormComponent将具有被调用的onChange()方法。这是代码。
form.component.html

< div style="border: 1px solid rgb(46, 93, 194); height: 25vh; width: 35vw; padding: 10px 10px; margin: 20px; " > < b > Type here : < / b > < input type = "text" [ngModel]='text' (ngModelChange)='onChange($event)' /> < child [message]='text'> < / child > < / div >

请注意, 此组件与显示双向绑定的先前代码之间的区别。在这里, ngModel和ngModelChange都与输入元素绑定。由于我们使用的是onChange(), 因此我们不需要使用@Input()来检测更改。
form.component.ts

import { Component, OnInit } from '@angular/core' ; @Component({ selector: 'app-form' , templateUrl: './form.component.html' , styleUrls: [ './form.component.scss' ] }) export class FormComponent implements OnInit {constructor() { }ngOnInit(): void { } public text : string; onChange(UpdatedValue : string) :void { this .text = UpdatedValue; } }

【如何检测Angular中@Input()值何时更改（）】输出如下：