Angular 的 ngOnInit 和 Constructor 的区别
Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函数,其中最常用的就是ngOnInit
。但在TypeScript或ES6中还存在着名为constructor
的构造函数,开发过程中经常会混淆二者,毕竟它们的含义有某些重复部分,那ngOnInit
和constructor
之间有什么区别呢?它们各自的适用场景又是什么呢?
区别
constructor
是ES6引入类的概念后新出现的东东,是类的自身属性,并不属于Angular的范畴,所以Angular没有办法控制constructor
。constructor
会在类生成实例时调用:
import {Component} from '@angular/core';@Component({selector: 'hello-world',templateUrl: 'hello-world.html'
})class HelloWorld {constructor() {console.log('constructor被调用,但和Angular无关');}
}
既然Angular无法控制constructor
,那么ngOnInit
的出现就不足为奇了,毕竟枪把子得握在自己手里才安全。
ngOnInit
的作用根据官方的说法:
ngOnInit用于在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
ngOnInit
属于Angular生命周期的一部分,其在第一轮ngOnChanges完成之后调用,并且只调用一次:
import {Component, OnInit} from '@angular/core';@Component({selector: 'hello-world',templateUrl: 'hello-world.html'
})class HelloWorld implements OnInit {constructor() {}ngOnInit() {console.log('ngOnInit被Angular调用');}
}
constructor适用场景
即使Angular定义了ngOnInit
,constructor也有其用武之地,其主要作用是注入依赖,特别是在TypeScript开发Angular工程时,经常会遇到类似下面的代码:
import { Component, ElementRef } from '@angular/core';@Component({selector: 'hello-world',templateUrl: 'hello-world.html'
})
class HelloWorld {constructor(private elementRef: ElementRef) {// 在类中就可以使用this.elementRef了}
}
在constructor
中注入的依赖,就可以作为类的属性被使用了。
ngOnInit适用场景
ngOnInit
纯粹是通知开发者组件/指令已经被初始化完成了,此时组件/指令上的属性绑定操作以及输入操作已经完成,也就是说在ngOnInit函数中我们已经能够操作组件/指令中被传入的数据了:
// hello-world.ts
import { Component, Input, OnInit } from '@angular/core';@Component({selector: 'hello-world',template: `<p>Hello {{name}}!</p>`
})
class HelloWorld implements OnInit {@Input()name: string;constructor() {// constructor中还不能获取到组件/指令中被传入的数据console.log(this.name); // undefined}ngOnInit() {// ngOnInit中已经能够获取到组件/指令中被传入的数据console.log(this.name); // 传入的数据}
}
所以我们可以在ngOnInit
中做一些初始化操作。
总结
开发中我们经常在ngOnInit
做一些初始化的工作。ngOnInit
是“开始”的好地方 - 它是解析组件绑定的地方。而这些工作尽量要避免在constructor
中进行,constructor
中应该只进行依赖注入而不是进行真正的业务操作。
Angular 的 ngOnInit 和 Constructor 的区别相关推荐
- ngOnInit与constructor的区别
前世今生 Angular会管理一个组件的生命周期,包括组件的创建.渲染.子组件创建与渲染.当数据绑定属性变化时的校验.DOM移除之前毁销. Angular提供组件生命周期钩子便于我们在某些关键点发生时 ...
- angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别
angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks 文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...
- angular ngOnInit 与constructor
先父组件的constructor (构造),之后子组件构造(constructor),之后 父组件初始化 ngOnInit,最后子组件初始化ngOnit. 以上结论 通过控制台得到结论.
- angular和vue和react的区别
一些历史 Angular 是基于 TypeScript 的 Javascript 框架.由 Google 进行开发和维护,它被描述为"超级厉害的 JavaScript MVW 框架" ...
- Javascript中typeof instanceof constructor的区别
typeof typeof,是一个运算符,运算中需要一个操作数,运算的结果就是这个操作数的类型,运算的结果是一个字符串.他有一定的局限性,对于对象类型的值,只能得到一个object结果,却不能精确得到 ...
- Angular 里 unknown 和 any 的区别
在SAP Spartacus项目里,我们定义的一个配置对象refreshFocus 属性的类型,为unknown: 这个StackOverflow讨论对于unknown和any的区别做了比较清楚的阐述 ...
- Angular Component ngOnInit和ngAfterViewInit调用时机的讨论
ngOnInit 在refreshView里,ngOnInit当成是PreOrderHooks来执行: 而ngAfterViewInit的调用时机:在ngOnInit之后,注释里写得比较清楚. 其中红 ...
- angular中的cookies与cookieStore区别
设置cookie用put()方法: $cookies.put(key, value[, options]); $cookieStore.put(key, value); 例如设置一个cookie,名为 ...
- Extjs 之 initComponent 和 constructor的区别(转)
在创建自定义类时,先构造(constructor)后初始化(initComponent).如:(在旧的Extjs 版本中使用 Ext.extend 实现扩展) Ext.define('Btn',{ e ...
最新文章
- 洛谷——P3807 【模板】卢卡斯定理
- net start zabbix agent 服务没有相应控制功能_一步到位,服务器监控就是这么简单...
- MySQL查询结果纵向输出标识符\G
- Vue第一部分(5):计算属性和过滤器
- linux 家目录没有了,linux刀片服务器断电重启以后home目录下的用户文件夹丢失了...
- 贝格数据携手清华大学“勘探”大数据富矿
- Android 高级面试-2:IPC 相关
- 原来查询语句还有这功能,累计变量值
- java基础--集合框架的认识
- 互联网基础知识_互联网广告前景怎么样?
- 【自撰】Redis客户端Jedis
- 基于单片机的HC-SR04超声波模块测距仪设计(数码管显示)
- Android技术知识点:如何添加字体资源
- Vulntarget靶场渗透笔记[持续更新中]
- 嵌入式(文件)数据库与数据库服务器的区别
- thinkphp5.x获取当前模块名称,当前控制器名称,当前类方法名称,当前模型名称
- 韩国仁川机场乐天免税店买买买!
- 苹果三代耳机_预告2020.6.13其他团无线蓝牙耳机
- TCL加码半导体,能走好显示面板国产化最后一段路吗?
- docker部署Harbor