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

@Input()基本上是将属性绑定为输入的装饰器。它用于传递数据，即从一个组件到另一个组件的属性绑定，或者可以说，从父组件到子组件。它与DOM元素绑定。更改DOM元素的值时，Angular会使用更改后的值自动更新此属性。在这里，我们将看到如何使用它。

方法： @Input()可以以两种方式使用：
• 使用@Input()进行双向绑定
• 与ngOnChange()和@Input()的单向绑定

• 首先，我们将研究双向绑定。
  双向绑定使用ngModel指令以单个表示法组合输入和输出。双向绑定的表示法是[()]。
  这是我们将实现双向绑定的方法。我们有一个组件FormComponent(父组件)和ChildComponent(子组件)。当用户在父组件的文本输入字段中输入任何内容时，子组件会检测到它。

  Implementation of Two-way binding:

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

  
      Type here : 
          
       
  
  

  在子组件中，我们传递了一个属性‘message’ ，该属性保存使用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

  
   
   You entered {{message}}
     
  

  在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

  
    
      Type here : 
         
      
  
  

  请注意，此组件与显示双向绑定的先前代码之间的区别。在这里，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;
    }
  }
  

输出：