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

Question

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

Documentaion: Angular - onChanges

What is the difference between OnChanges and DoCheck in Angular 2?

Documentaion: Angular - Lifecycle hooks

Stackoverflow: In Angular 4 the hook ngOnChanges is not firing on input

这是我的代码:

my-component.component.html

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

my-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")
  // }
}

两条重要信息:

我试过 DoCheck还有，但这不是我想要的。我想看看只有输入字段的 值是否改变。但是ngDoCheck将在其余组件的每次轻微更改后调用，因为它正在使用 zone.js (我在某处读过这个)。

我不能用 (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");
  // }
}