当我们输入 [Angular] 时，如何检测输入字段的变化

Question

我是 Angular 的新手。我正在尝试一些简单的事情。我有一个输入字段。我只想检测变化。每当我在该字段中输入时，我都想调用一些代码。我检查了这些文章：

1. 文档：Angular - onChanges
2. Angular 2 中的 OnChanges 和 DoCheck 有什么区别？
3. 文档：Angular - 生命周期钩子
4. Stackoverflow：在 Angular 4 中，钩子 ngOnChanges 不会在输入时触发

这是我的代码：

我的component.component.html

<input [(ngModel)]="text">

我的component.component.ts

import { Component, OnInit, DoCheck } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, DoCheck {

  text="hello world";

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }

  // ngDoCheck() { // TRIED THIS ALSO
  //   console.log("Changes detected")
  // }
}

两个重要信息：

1. 我DoCheck也试过了，但这不是我想要的。我想看看是否只更改了输入字段的值。但是ngDoCheck在其余组件的每次轻微更改后都会被调用zone.js（我在某处读过）。

2. 我也不能使用，(keydown)因为我想稍后实现验证代码。我希望在输入时进行验证。但是使用keydown，我注意到即使输入的值有效，我也必须通过一些按键触发验证代码，比如说日期/时间。

牢记以上两点，请指正。这是stackblitz。

Answer 1

您可以使用input()：例如 ：

HTML :

<input [(ngModel)]="text" (input)="sendTheNewValue($event)">

TS：

let value:string;

sendTheNewValue(event){
this.value = event.target.value;
}

在你的例子中： HTML：

<input [(ngModel)]="text" (input)="change($event)">
<div>the input value is : {{text}}</div>

TS：

import { Component, OnInit, DoCheck, SimpleChanges, OnChanges, Input   } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, OnChanges  {

  text="hello world";

  @Input() name: String = "abc"

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
    console.log("Changes detected");
  }

  change(event){
    this.text = event.target.value;
  }

  // ngDoCheck() {
  //   console.log("Changes detected");
  // }
}

Answer 2

Angular 自行处理变化检测。当事情发生时，你只需要了解其中的逻辑即可。在大多数情况下，这比使用事件侦听器更可取，事件侦听器是由本线程中的大多数其他答案提出的。

每当您的输入发生更改时，角度都会访问设置字符串的变量。

当变量发生变化时执行某些操作的一种方法是使用getter 和setter。

  // create an internal variable (do not change manually)
  private _text;

  // getter function, called whenever the value is accessed
  get text(){
    console.log("the value was accessed")
    return this._text
  }

  // setter function, called whenever the value is set
  set text(text){
    this._text = text
    console.log("the value was set")
  }

我还编辑了您的 stackblitz 以包含一个示例。 https://stackblitz.com/edit/angular-6qvlrh

其他一切都保持不变。你只需要在文本上使用 ngModel 即可。

<input [(ngModel)]="text">