zoukankan      html  css  js  c++  java
  • Angular之constructor和ngOnInit差异及适用场景(转)

    原始地址:https://blog.csdn.net/u010730126/article/details/64486997

    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无关');
    }
    }

    // 生成类实例,此时会调用constructor
    new HelloWorld();

    // 生成类实例,此时会调用constructor
    new HelloWorld();

    既然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做一些初始化的工作,而这些工作尽量要避免在constructor中进行,constructor中应该只进行依赖注入而不是进行真正的业务操作。
    ---------------------
    作者:刘文壮
    来源:CSDN
    原文:https://blog.csdn.net/u010730126/article/details/64486997
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    Why Choose Jetty?
    Jetty 的工作原理以及与 Tomcat 的比较
    Tomcat设计模式
    Servlet 工作原理解析
    Tomcat 系统架构
    spring boot 打包方式 spring boot 整合mybaits REST services
    wireshark udp 序列号 User Datagram Protocol UDP
    Maven 的聚合(多模块)和 Parent 继承
    缓存策略 半自动化就是mybaitis只支持数据库查出的数据映射到pojo类上,而实体到数据库的映射需要自己编写sql语句实现,相较于hibernate这种完全自动化的框架我更喜欢mybatis
    Mybatis解决sql中like通配符模糊匹配 构造方法覆盖 mybits 增删改
  • 原文地址:https://www.cnblogs.com/zhao-shan/p/10570767.html
Copyright © 2011-2022 走看看