美文网首页我爱编程
Angular快速入门 组件及组件树(一)

Angular快速入门 组件及组件树(一)

作者: Emily_Zhy | 来源:发表于2018-05-19 12:24 被阅读0次
    Angular2八大核心概念 组件

    Components是Angular2最核心的概念,其它都是它的延伸。组件是构成整个angular2的基础单元,这些组件层层嵌套,自上而下的组成一个组件树。

    组件通讯机制

    虽然每个组件都能够独立地完成各自的功能,但是组件不可能孤立地存在。它们之间有一套完善的通讯机制,每个组件都可以定义自己的输入输出属性,这些属性成为它们的对外接口。

    全生命周期支持

    Angular2还有一个重要的特性,就是组件都有完整的生命周期钩子。这些钩子使我们能够清晰地知道组件的状态变化。这里列举一些重要钩子

    Constructor:构造函数,做一些组件类的初始化工作,如变量的初始赋值等

    接下来会触发OnChanges钩子,这是OnChanges钩子的第一次触发,来接收父组件的传入的数据。为接下来组件初始化提供数据支持。

    然后到了OnInit钩子,这个才是实际意义的组件初始化阶段,Angular2不推荐在构造函数中处理跟业务逻辑相关的工作,更好的方式放在OnInit中处理。

    接下里组件进入稳定期,这个时期,Onchanges钩子再次触发。只要从输入属性上获得的数据发生变化,Onchanges钩子就会触发一次。

    最后在组件销毁前触发OnDestroy钩子。做一些清理工作,如事件解绑,取消数据订阅等。

    组件示例 元数据与装饰器

    @Components是一个装饰器,装饰器是Typescript提供的语法特性,用来修饰一个类。如果只定义一个类,Angular2是没法解释这个类的,如果在这个类上加上@Component装饰器,装饰器在运行的时候,会把它的元数据参数通过某种方式注入到这个类中,Angular2就能识别出原来这个类就是组件类。

    装饰器就是赋予一个类更丰富的信息,这些信息就是元数据。

    相关文章

      网友评论

        本文标题:Angular快速入门 组件及组件树(一)

        本文链接:https://www.haomeiwen.com/subject/klmodftx.html