如何检测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;
   }
}

输出如下：

---