时间:2021-05-25
1. constructor
constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作。当包含constructor的类被实例化时,构造函数将被调用。
来看例子:
class AppComponent { public name: string; constructor(name) { console.log('Constructor initialization'); this.name = name; }}let appCmp = new AppComponent('AppCmp'); // 这时候构造函数将被调用。console.log(appCmp.name);转成ES5代码如下:
var AppComponent = (function () { function AppComponent(name) { console.log('Constructor initialization'); this.name = name; } return AppComponent; // 这里直接返回一个实例}());var appCmp = new AppComponent('AppCmp');console.log(appCmp.name);2. ngOnInit
ngOnInit是Angular中OnInit钩子的实现。用来初始化组件。
Angular中生命周期钩子的调用顺序如下:
在Angular销毁指令/组件之前调用。
了解了这些之后我们来看一个例子:
import { Component, OnInit } from '@angular/core';@Component({ selector: 'my-app', template: ` <h1>Welcome to Angular World</h1> `,})export class AppComponent implements OnInit { constructor() { console.log('Constructor initialization'); } ngOnInit() { console.log('ngOnInit hook has been called'); }}这里输出的是:
Constructor initialization
ngOnInit hook has been called
可以看出,constructor的执行是在先的。
那么既然ngOnchanges是输入属性值变化的时候调用,并且ngOnInit是在ngOnchanges执行完之后才调用,而constructor是在组件就实例化的时候就已经调用了,这也就是说,在constructor中我们是取不到输入属性的值的。
所以还是看例子:
一目了然。
3. 应用场景
看完的上面的部分可以发现,在constructor中不适合进行任何与组件通信类似的复杂操作,一般在constructor中值进行一些简单的初始化工作:依赖注入,变量初始化等。
那么用到组件间通信的方法我们可以放在ngOnInit中去执行,比如异步请求等:
import { Component, ElementRef, OnInit } from '@angular/core';@Component({ selector: 'my-app', template: ` <h1>Welcome to Angular World</h1> <p>Hello {{name}}</p> `,})export class AppComponent implements OnInt { name: string = ''; constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象 this.name = 'WXY'; // 执行初始化操作 } ngOnInit() { this.gotId = this.activatedRoute.params.subscribe(params => this.articleId = params['id']); }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函数,其中最常用的就是ngOnInit。但在TypeScript或ES6中还存在着名为c
0x00:前言参考之前的《MyBatis中SqlMapConfig配置文件详解》记了一下MyBatis中的核心配置文件各个标签的作用和使用场景,这篇文章细说一下
golang里出现多goroutine的场景很常见,最常用的两种方式就是WaitGroup和Context,今天我们了解一下Context的应用场景使用场景场景
使用es6中装装饰器能做很多事情,今天分享一种在angular使用装饰器进行方法调用缓存的功能。应用场景是这样的,在前端工作中,会有一些经常使用的方法经常被调用
背景在rpc接口调用场景或者使用动态代理的场景中,偶尔会出现undeclaredthrowableexception,又或者在使用反射的场景中,出现invoca