zoukankan      html  css  js  c++  java
  • 3-1 组件生命周期(1)


    ngDoCheck理解为angular去检查内部各种值的变化
    ngAfterContentInit:理解为组件里面嵌套的一些内容,它初始化完毕。
    ngAfterContentChecked:投影初始化之后,系统会检查投影的内容,检查属性的变化。为什么要检查属性的变化,通过检查属性的变化,反馈到视图上去。

    代码实战

    组件在默认新建的时候已经实现了一个接口OnInit

    然后有一个ngOnInit的方法,这个钩子函数已经默认建在这了。


    模板默认生成的时候 也给我们建了一个构造器


    打印两个东西,查看日志




    实现Oninit的接口其实可以不加。

    这里暂时先删掉。


    因为已经有了模式的钩子函数。ngOninit()



    但是推荐实现这个接口。

    增加OnInit接口的好处,我们由于某种失误,把ngOnInit函数误删了

    这里就会提示错误,说 应该实现OnInit的接口。

    实现接口自动生成的代码

    在团队合作中其实会有一些作用。有些新人可能不太了解要实现什么样的接口。实现这个接口,在ngOnInit被删除后就会启动规范和约束的作用。就会提示错误 说需要实现OnInit的接口。

    如果删掉了接口,tsLint其实也会提示实现这个接口。

    接口是可选的,也就说只要有类似ngOnInit这样的方法存在,声明周期的钩子函数还是正常执行,但建议实现接口,好处是不会由于误删除某个钩子函数,另一个是对组件涉及哪些声明周期一目了然





    ngOnInit方法内,组件这个类本身就已经构造完毕了。所以在这里的类 ,我们可以非常安全的使用它

    ngOnChange

    智能提示




    导入SimpleChanges

    把changes属性打印出来看一下

    输入属性是一个字典类型的,字典的每一个key值就是你输入的参数


    当前值,第一个值,和上一个值都传过来。

    tsLint提示我们要实现这个接口。


    实现接口OnChanges

    实现接口并导入对应的包

    父组件内演示

    为了让大家更清楚onChanges,在它的父组件中改变一下

    这是原来的父组件的内容。





    每次点击的时候,处理这个值。
    定义颜色的数组。
    Math.floor取整数, Math.random取0到不到1的随机数乘以3 就是0不到3的随机数






    再点击一次

    ngDoCheck

    输入了ngDoCheck后,就会有错误提示 ,绿色的线标识,官方认为一个组件内不应该同时定义ngDoCheck和ngOnChanges这两个函数。
    这两个钩子函数要达到的目的某种角度来说是类似的,只不过DoCheck要做脏值监测,。 
    为什么组件的属性变化,或者说是状态变化后,会体现在界面当中,因为angular框架会对所有组件的状态进行维护和监测,一但有值发生变化,就会去监测,doCheck这种角度来说就干这个用的。
    onChange的区别就是监听自己组件本身的属性变化。doCheck是angular在做整个大的框架型的检查的时候,到达这个组件的时候,它就会发生doCheck的这个事件。
    一个是框架帮你做的就是doCheck,一个是你主动关心的也就是OnChanges。所以他俩在某种角度是重合的




    这里先不管,先在doCheck内输出

    结束

  • 相关阅读:
    [机器学习]单变量线性回归(最小二乘法)
    [机器学习]kNN进邻算法
    Python笔记(读取txt文件中的数据)
    [机器学习笔记] 1监督学习
    LeetCode(Add Two Numbers)
    缓冲区溢出在Linux虚拟机上的实现过程中的问题与解决
    数据库与后端的映射
    电子公文传输系统 团队作业(五):冲刺总结
    电子公文传输系统 团队作业(五):冲刺总结(第一天)
    电子公文传输系统 团队作业(四):描述设计
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/11765255.html
Copyright © 2011-2022 走看看