angular4 ngOnChanges方法

Question

我已經改變了我的angular1項目angular4，但ngOnChanges方法好像不行，我想看一些值時，他們改變了

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

@Component({ 
    moduleId: module.id, 
    selector: 'login-page', 
    templateUrl: './login.page.html' 
}) 

export class LoginPage implements OnChanges{ 

    userName: string = 'who am i'; 
    password: string; 
    changeLog: string[] = []; 

    ngOnChanges(changes: SimpleChanges) { 
     console.info(changes); //it didn't work anymore,please help me 
     for (let propName in changes) { 
      let chng = changes[propName]; 
      let cur = JSON.stringify(chng.currentValue); 
      let prev = JSON.stringify(chng.previousValue); 
      this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); 
     } 
    } 
    showValue(f) { 
     console.info(f); 
    } 
} 

我必須想盡一切使它對敏感的途徑價值的變化，我徘徊爲什麼演示可以從angular.io運行（https://embed.plnkr.co/?show=preview），但我的應用程序不工作。我不知道我是否在我的應用程序中留下了一些重要的東西，ngOnChanges方法不再工作了

<ion-header> 
    <ion-navbar> 
     <ion-title>login</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <form #f="ngForm" (ngSubmit)="showValue(f)"> 
     <ion-item> 
      <ion-label fixed>username</ion-label> 
      <ion-input type="text" required [(ngModel)]="userName" name="userName"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label fixed>username2</ion-label> 
      <ion-input type="text" [value]="userName" (input)="userName = $event.target.value"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label fixed>pwd</ion-label> 
      <input type="text" [(ngModel)]="password" name="pwd"> 
      <ion-input type="password" [(ngModel)]="password" name="pwd"></ion-input> 
     </ion-item> 
     <input ion-button type="submit" value="commit" class="button-block-ios button"> 
     <button ion-button outline>Primary Outline</button> 
    </form> 
    <div> 
     <input type="text" [(ngModel)]="userName"> 
    </div> 
    <div *ngFor="let chg of changeLog">{{chg}}</div> 
    <div>{{userName}}</div> 
    <!--<input type="text" class="item-input" [value]="userName" (click)=showValue>--> 
</ion-content> 

Answer 1

ngOnChanges()僅在更改檢測後更改組件的@Input()時才由角度更改檢測調用，而不是在任意代碼更改輸入時更新。對於不是輸入的字段，永遠不會調用ngOnChanges。

你可以只讓你的領域getter/setter方法，有把代碼應執行時的值更新

_userName: string = 'who am i'; 
set userName(val:string) { this._userName = val; /* more code */} 
get userName():string { return this._userName; } 

Answer 2

我會建議你使用Reactive Forms

在這種情況下，你」將能夠：

constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'username': [ 
      '',     // initial value 
      Validators.required, // use if it's a required field 
     ] 
    }); 

    // subscribe on particular input change 
    this.usernameControl = this.myForm.controls['username']; 
    this.usernameControl.valueChanges.subscribe(() => { 
     // use this.usernameControl.value 
    }); 

    // or subscribe on any form input change 
    this.myForm.valueChanges.subscribe(() => { 
     // use this.myForm.value 
    }); 

} 

HTML代碼應包含以下內容：

<form> 
    ... 
    <input class="form-control" [formControl]="usernameControl"> 
    ... 
</form>