zoukankan      html  css  js  c++  java
  • Angular constructor和OnInit的区别和适用场景

    constructor和OnInit的区别和适用场景

    一、区别

        1.1 constructor

                Es6中引入了类的概念,constructor是类中的特殊函数,并不属于Angular的范畴,Angular不能控制constructor,constructor会在类生成实例时自动被调用。

        1.2 ngOnInit

        constructor不受Angular的控制,因此就有了ngOnInit。ngOnInit是Angular生命周期中的一个钩子,ngOnInit的官方解释是:ngOnInit在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。

    二、适用场景

         2.1 constructor

        constructor 函数一般用于依赖注入或执行一些简单的初始化操作

    import { Component, ElementRef } from '@angular/core';
    import{ ActivatedRoute } from '@angular/router';
    
    @Component({
        selector: 'hello',
        templateUrl: './hello.html'
    })
    class Hello {
        constructor(private activatedRoute:ActivatedRoute) {
            // 在类中就可以使用this.activatedRoute了
        }
    }
    

      2.2 ngOnInit

             ngOnInit 纯粹是通知开发者组件/指令已经被初始化完成了,此时组件/指令上的属性绑定操作以及输入操作已经完成,也就是说在 ngOnInit 函数中我们已经能够操作组件/指令中被传入的数据了。在项目开发中,我们要尽量保证 constructor 函数的简洁明了,contructor 只做数据的简单初始化和依赖注入。其余的数据初始化操作,例如 组件获取输入属性之后,需执行组件初始化操作等等,都要放在 ngOnInit 中执行。

    import { Component, Input, OnInit } from '@angular/core';
    
    @Component({
        selector: 'hello',
        template: `<p>Hello {{name}}!</p>`
    })
    class Hello implements OnInit {
        @Input()
        name: string;
    
        constructor() {
            // constructor中还不能获取到组件/指令中被传入的数据
            console.log(this.name);     // undefined
        }
    
        ngOnInit() {
            // ngOnInit中已经能够获取到组件/指令中被传入的数据
            console.log(this.name);     // 传入的数据
        }
    }
    

      

        开发中我们经常在ngOnInit做一些初始化的工作,而这些工作尽量要避免在constructor中进行,constructor中应该只进行依赖注入而不是进行真正的业务操作。

  • 相关阅读:
    streamsets 集成 cratedb 测试
    streamsets k8s 部署试用
    streamsets rest api 转换 graphql
    StreamSets sdc rpc 测试
    StreamSets 相关文章
    StreamSets 多线程 Pipelines
    StreamSets SDC RPC Pipelines说明
    StreamSets 管理 SDC Edge上的pipeline
    StreamSets 部署 Pipelines 到 SDC Edge
    StreamSets 设计Edge pipeline
  • 原文地址:https://www.cnblogs.com/Lyh1997/p/11022091.html
Copyright © 2011-2022 走看看