理解ngOnChanges吊钩

Question

下面是OnChanges生命周期事件在angular2文档中的解释。

ngOnChanges -在ngOnInit之前以及当数据绑定输入属性值更改时.

下面是我的示例组件代码

@Component({
   selector:'app-main',
   template:`
      <user-form>Loading....</user-form>
   `,
   directives: [userFormComponent],
   providers: [HTTP_PROVIDERS,UserService]
})

export class AppComponent implements OnInit , OnChanges {

  @Input()
  public prop: string = "hi!";

  ngOnInit() {
     console.log('ngOnInt') ;
  }

  ngOnChanges() {
     console.log('ngOnChanges') ;
  }  

}

我在html页面中引用这个组件，如下所示

<app-main [prop]="test">Loading...</app-main>

现在我的问题是，即使我正在通过附加值"test“来更改数据库输入属性"prop”，为什么没有执行ngOnChanges。顺便说一句，我是angular2的新手。

Answer 1

问题是，这不适用于主要组件/根组件。

这不起作用的原因是，您放置的index.html不是一个角组件。正因为如此，角不会编译这个元素。在运行时，只有在编译期间，角才不会读取属性值，否则，我们的性能就会受到影响。

因此，ngOnChanges钩子方法不适用。

见这个问题：

• Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit)