如何在我們輸入 [Angular] 時檢測輸入字段的變化

Question

我是 Angular 的新手。我正在嘗試一些簡單的事情。 我有一個輸入字段。 我只想檢測變化。 每當我輸入該字段時，我都想調用一些代碼。 我檢查了這些文章：

1. 文檔：Angular - onChanges
2. Angular 2中的OnChanges和DoCheck有什么區別？
3. 文檔：Angular - 生命周期掛鈎
4. Stackoverflow：在 Angular 4 中，鈎子 ngOnChanges 沒有在輸入時觸發

這是我的代碼：

我的組件.component.html

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

我的組件.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將在組件的 rest 每次發生細微變化后被調用，因為它正在使用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 自己處理變化檢測。 你只需要在它發生時掛鈎邏輯。 在大多數情況下，這比使用事件偵聽器更可取，后者由該線程中的大多數其他答案提出。

每當您的輸入發生更改時，angular 都會訪問設置字符串的變量。

當變量改變時做某事的一種方法是使用get ter 和set ter。

  // 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">

Answer 3

這 2 項更改是跟蹤輸入更改所必需的：

1. 更新組件模板以綁定值並指定（更改）事件。
2. 更新組件腳本以指定onChange方法。

工作解決方案：

1. my-component.component.html

<input [(value)]="text" (change)="onChange($event)">

2. 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 {

  text="hello world";
  constructor() { 
    console.log("Text = " + this.text)
  }

  onChange(event: any) {
       this.text = event.target.value;
       console.log("New value = " + event.target.value)
  };
}

Answer 4

我認為以上所有答案都是正確的。 我喜歡 getter-setter 方法，盡管它添加了幾行代碼。 以防萬一您想測試跟蹤更改的第三種方法 y 分叉您的代碼： https://stackblitz.com/edit/angular-myrrqo

它使用@ViewChildren和訂閱valueChanges observable：

export class MyComponentComponent implements AfterViewInit  {

  text="hello world";
  second="hi angular";

  @ViewChildren(NgModel) myInputRef: QueryList<NgModel>;

  ngAfterViewInit() {
    this.myInputRef.forEach(ref =>
      ref.valueChanges.subscribe(val =>
        console.log(`${ref.name}'s value changed to ${val}`)
      )
    );
  }
}

在模板中：

<input [(ngModel)]="text" name="firstInput">
<input [(ngModel)]="second" name="secondInput">

我添加了第二個輸入元素，以表明如果您有多個具有雙向綁定的元素，則必須使用@ViewChildren 。 如果你只有一個元素，你可以使用@ViewChild(NgModel) myFirstInput: NgModel; 並且代碼會更簡單。

Answer 5

在 html

<input type="text" (input)="onChange($event.target.value)">

在組件中

onChange(value:string){
console.log(value) }