Question

嗨，在这个只有一个输入框和双向绑定的简单组件中，我想通过在键入输入时登录到控制台来测试OnChanges生命周期挂钩。 ngOnChanges未登录到控制台。 ngOnInit是。什么是让它发挥作用的最佳方式？

import {Component, SimpleChange} from '@angular/core'; 

@Component( { template:`
<div>
  hello life
  <input type="text" placeholder="hassan" [(ngModel)]="name" />
  <p> my name is:{{ name}} </p>
</div> `, selector:'hook-life' } ) 
export class LifeCycleComponent { 
  name:string=""; 
  constructor(){ console.log("constructor ")} 

  ngOnChanges(c:SimpleChange) { console.log(`onchanges ${c.currentValue} `); } 

  ngOnInit() { console.log("onInit") } 

  ngOnDestroy() {
console.log("onDestroy") } }

Answer 1

我注意到你没有导入或实现你的生命周期钩子。试着这样做：

        import {Component, SimpleChange, OnInit, OnDestroy, OnChanges} from '@angular/core'; 

        @Component( { template:`
          <div>
            hello life
            <input type="text" placeholder="hassan" />
          </div> `, 
          selector:'hook-life' } ) 

        export class LifeCycleComponent implements OnInit, OnDestroy, OnChanges { 

        constructor(){ console.log("constructor ")} 

        ngOnChanges(c:SimpleChange) { console.log(`onchanges ${c.currentValue} `); } 
        ngOnInit() { console.log("onInit") } 
        ngOnDestroy() { console.log("onDestroy")
        } }

Answer 2

要观察组件中输入元素的更改，请使用这样的getter和setter：

private _name: string;
get name(): string {
    return this._name;
}
set name(value: string) {
    this._name = value;
    console.log(this.name);
}

如何检测Angular生命周期钩OnChanges

2 个答案: