Angular2 constructor VS ngOnInit_weixin_30319097的博客-程序员宅基地

技术标签: ViewUI  javascript  

constructor和ngOnInit钩子有什么不同?

constructor

constructor(构造函数)是ES6类或TypeScript类中的特殊方法,而不是Angular的方法,主要用来做初始化操作,在进行类实例化操作是,会被自动调用。通过constructor方法并不能使我们知道Angular何时完成了组件的初始化工作。

仅显示constructor方法:

import { Component } from '@angular/core';

@Component({})
class ExampleComponent {
  // this is called by the JavaScript engine
  // rather than Angular
  constructor(name) {
    console.log('Constructor initialised');
    this.name = name;
  }
}

// internally calls the constructor
let appCmp = new ExampleComponent('AppCmp');
console.log(appCmp.name);

运行以上代码,控制台输出结果:

Constructor initialization
AppCmp

constructor方法是由JavaScript引擎调用的,而不是Angular,这就是为什么ngOnInit生命周期钩子被创建的原因。

ngOnInit

ngOnInit 是 Angular 2 组件生命周期中的一个钩子,Angular 2 中的所有钩子和调用顺序如下:

  1. ngOnChanges - 当数据绑定输入属性的值发生变化时调用

  2. ngOnInit - 在第一次 ngOnChanges 后调用

  3. ngDoCheck - 自定义的方法,用于检测和处理值的改变

  4. ngAfterContentInit - 在组件内容初始化之后调用

  5. ngAfterContentChecked - 组件每次检查内容时调用

  6. ngAfterViewInit - 组件相应的视图初始化之后调用

  7. ngAfterViewChecked - 组件每次检查视图时调用

  8. ngOnDestroy - 指令销毁前调用

其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件,该钩子方法会在第一次 ngOnChanges 之后被调用。

另外需要注意的是 ngOnInit 钩子只会被调用一次,我们来看一下具体示例:

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {
    {name}}</p>
  `,
})
export class AppComponent implements OnInit {

  name: string = '';

  constructor() {
    console.log('Constructor initialization');
    this.name = 'Semlinker';
  }

  ngOnInit() {
    console.log('ngOnInit hook has been called');
  }
}

 

以上代码运行后,控制台输出结果:

Constructor initialization
ngOnInit hook has been called

接下来看一个父-子组件传参的例子:

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'exe-parent',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {
    {name}}</p>
    <exe-child [pname]="name"></exe-child>
  `,
})
export class ParentComponent {
  name: string = '';

  constructor() {
    this.name = 'Semlinker';
  }
}

child.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'exe-child',
    template: `
     <p>父组件的名称:{
    {pname}} </p>
    `
})
export class ChildComponent implements OnInit {
    @Input()
    pname: string; // 父组件的名称

    constructor() {
        console.log('ChildComponent constructor', this.pname); // Output:undefined
    }

    ngOnInit() {
        console.log('ChildComponent ngOnInit', this.pname);
    }
}

以上代码运行后,控制台输出结果:

ChildComponent constructor undefined
ChildComponent ngOnInit Semlinker

我们发现在 ChildComponent 构造函数中,是无法获取输入属性的值,而在 ngOnInit 方法中,我们能正常获取输入属性的值。因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后在调用 ngOnInit 钩子方法,所以在 ngOnInit 方法内能获取到输入的属性。

constructor 应用场景

在 Angular 2 中,构造函数一般用于依赖注入或执行一些简单的初始化操作。

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {
    {name}}</p>
  `,
})
export class AppComponent {
  name: string = '';

  constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象
    this.name = 'Semlinker'; // 执行初始化操作
  }
}

ngOnInit 应用场景

在项目开发中我们要尽量保持构造函数简单明了,让它只执行简单的数据初始化操作,因此我们会把其他的初始化操作放在 ngOnInit 钩子中去执行。如在组件获取输入属性之后,需执行组件初始化操作等。

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

@Component({})
class ExampleComponent implements OnInit {
  constructor() {}
  
  // called on demand by Angular
  ngOnInit() {
    console.log('ngOnInit fired');
  }
}

const instance = new ExampleComponent();

// Angular calls this when necessary
instance.ngOnInit();

 

转载于:https://www.cnblogs.com/xuepei/p/7921762.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30319097/article/details/95214515

智能推荐

一个对iBatis的总结写的不错(转载)_weixin_30590285的博客-程序员宅基地

转载自:http://blog.csdn.net/panxueji/article/details/9852795一、ibatis介绍ibatis始于2002年,2010年更名为mybatis,并迁移到了googlecode.com里。ibatis最初侧重于密码软件的开发,现在是一个基于Java的持久层框架。Hibernate与ibatis相比而言:1、Hibernat...

树莓派:首次连接WiFi及打开SSH_SameWorld的博客-程序员宅基地

树莓派:首次连接WiFi及打开SSH1、WiFi配置镜像烧录以后,打开sd卡的boot目录,新建wpa_supplicant.conf 文件,添加一下内容:country=CNctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdevupdate_config=1 network={ssid="WiFi-A"psk="12345...

HDU 1281& TOJ 2733 棋盘游戏 二分图最大匹配_TheWise_lzy的博客-程序员宅基地

棋盘游戏Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 2535    Accepted Submission(s): 1476Problem Description小希和Gardon在玩一个游戏:对一个N*M的棋盘,在格子里放尽量多的一些...

Mac m1 电脑 idea 卡顿的问题解决_逆袭的小学生的博客-程序员宅基地_idea m1卡顿

公司发的mac m1重装系统后贼卡,我一直以为是系统兼容性的问题,平时自己太忙(懒)了,一直没看,今天抽空看了一下发现是贼简单的问题,对自己无语了。其实就是下载错版本了,可以看下打开about看下自己的版本,如果不是aarch64,而是x86,那就是版本错了。然后去idea官网再下一个就好了,估计我当时下错就是没点那个下拉按钮。。。。...

python爬虫 ConnectionResetError(54, ‘Connection reset by peer‘))_大胖子摩尔先生的博客-程序员宅基地

conda install "requests[security]"或者pip3 install "requests[security]"原理我也清楚,但是真的解决问题!

mysql mycat 路由规则_Mycat分库路由规则_齐泉的博客-程序员宅基地

Mycat分库路由规则发布时间:2020-06-15 16:54:10来源:51CTO阅读:11651作者:lzf05303774一、Mycat分库路由分为连续路由和离散路由。1、连续路由:(1)、常用的路由方式:auto-sharding-long、sharding-by-date、sharding-by-month(2)、优点:扩容无需迁移数据;范围条件查询消耗资源少。(3)、缺点:存在数据热...

随便推点

怎么快速学习App后台开发_newjueqi的博客-程序员宅基地_app后端开发

本人从去年7月份开始持续到今年2月份,终于写完了书籍《App后台开发运维和架构实践》,这是一本教导刚入行的同学快速学习App后台开发的书籍。

Spark初学(三)- StreamingContext - 日志解析_一步_笑的博客-程序员宅基地

spark进行日志解析有两种方式:一、flume(日志采集)将采集到的日志保存到硬盘的日志文件中,spark每隔一段时间汇总分析一次(我们在用的是这种方式,每一个小时通过自定义的sink生成一个日志文件,spark的汇总每隔一个小时被调用一次,汇总上个小时采集的日志)。二、flume将采集到的日志保存在内存中,spark通过流每隔几秒获取一次内存中数据,汇总分析保存。第二种实现: SparkCon...

qq视频转码失败怎么办_迅捷视频转换器转换腾讯视频为什么失败?图文教你轻松转换..._杯子没水的博客-程序员宅基地

很多小伙伴在观看喜欢的视频时,会想要将视频给下载下来,这样观看的时候会方便很多。但是我们也知道,有一些视频格式是只能在指定的播放器上观看,无法在其他播放器上随意打开,这样也给给大家造成很大的困扰。所以今天小编就要来和大家讲讲,如何转换腾讯视频文件格式。一、如何使用迅捷视频转换器转换腾讯QLV格式1、需要转换视频格式的话,可以先在电脑上运行“迅捷视频转换器”软件。2、然后根据需要,可以点击界面上的“...

2021-07-20_谁还不是个程序员的博客-程序员宅基地

七层模型​ 应用层 -&gt; 人机交互​ 表示层 -&gt; 数据格式、压缩、加密、呈现格式​ 会话层 -&gt; 建立会话​ 传输层 -&gt; 端到端传输、可靠传输​ 网络层 -&gt; 路由,寻找最佳路径​ 数据链路层 -&gt; 建立链路转发、MAC寻址​ 物理层 -&gt; 二进制传输 (脉冲信号)、接口、电器、电压、线路ISO 国际标准化组织四层模型 —&gt; IETF 组织 ----&gt;事实上的模型,现有协议后有模型上三层统一为应用层传输层网络层网络接口层I

List<Map>去重并合并数量_weixin_30480583的博客-程序员宅基地

今天在查询出的sql中,出现了部门名称和部门ID有重合的数据!当然这样在页面上展示也会容易一起误导!查询出的数据结构如下图希望根据deptid中 &gt;最后一个节点id把deptname 合并成&gt;最后一个节点名称并且origincode 数量合并,现在贴代码,做个记录: List&lt;Map&gt; dataList = bigScreenService.qu...

nginx搭建点播视频(Mp4播放)_weixin_34221036的博客-程序员宅基地

首先,环境中必然要有gcc-c++环境  yum -y install gcc-c++1 使用openresty这里使用的是1.11.2.1版本的openresty和1.0.2版本的openssl   [email protected]: ~#yum install readline-devel pcre-devel openssl-devel gcc    [email protected]