angular学习笔记之ngOnInit方法和constructor的区别

      最近在学习angular英雄demo时,发现中文文档上说了如图这一段话;虽然这里介绍了ngOnInit方法和constructor的区别,但是我觉得太过笼统。为什么构造器不能调用某个函数来向远端发送http请求(虽然在构造器中处理逻辑不规范),于是自己找了些资料整理了一下。

angular学习笔记之ngOnInit方法和constructor的区别

1、constructor

    constructor是class的构造函数,当对象被实例化的时候被调用;这里经常处理初始化和给属性赋值的动作;如图:

    angular学习笔记之ngOnInit方法和constructor的区别

    angular学习笔记之ngOnInit方法和constructor的区别

2、ngOnInit

    ngOnInit是实现了OnInit生命钩子,用来初始化组件;在官网的文档上的说明如下:

angular学习笔记之ngOnInit方法和constructor的区别

区别:

    1)执行顺序,constructor和ngOnInit都能进行初始化,那它们的执行先后顺序是什么呢?看下图demo

angular学习笔记之ngOnInit方法和constructor的区别

        我们发现constructor是在ngOnInit之前执行的,说明constructor是在组件实例化时就已经执行了;在官网文档中说ngOnInit是在第一次显示数据绑定和设置组件的输入属性之后,初始化组件的;那constructor是否能设置组件的输入属性呢?

    2)输入属性

HerosComponent是父组件

        HeroDetailComponent是子组件,pname为父组件的输入属性

angular学习笔记之ngOnInit方法和constructor的区别

angular学习笔记之ngOnInit方法和constructor的区别

运行结果:

angular学习笔记之ngOnInit方法和constructor的区别

说明在construct中取不到输入属性的值

所以官网文档中说 它肯定不能调用某个函数来向远端服务(比如真实的数据服务)发起 HTTP 请求。