Angular八大核心之组件与组件树

Angular2的八大核心如下图所示

然而, 最核心的,就是组件. 其它7种核心都是在组件上进行延伸, 为组件提供服务

我先来了解下什么是组件, 还有什么是组件树

组件是构成angular的基础单元, 组件之间层层嵌套. 形成一个组件树 . 那么意味着组件之间不可能孤立的存在 , 他们之间有着一整套完善的通讯机制

每个组件都可以定义输入输出属性 ,这些属性成为了对外通讯的接口,负责与上下组件的交互

如下图:

组件中还有一套比较重要的特性 , 就是组件的生命周期钩子, 每个组件都有. 

这些钩子可以让我们知道这些组件的状态变化

如下图(比较重要的五种)

一个组件的示例, 一般来说, 我们把@Component一整块称之为装饰器 ,中间的为元数据, 以及组件类

如图 :

如果仅仅定义了一个类, angular是不怎么如何解释这个类的 , 当我们加上@Component这个装饰器,就可以解释了.

如图

我们可以通过两种方式使用模版, 第一种是内联, 直接写在template中, 第二种是使用外面的文件. 一个组件只能使用一种模版

接下来我们看数据绑定, 第一种是插值, 与 laravel类似

除了插值, 还有三种数据绑定

组件的渲染

整个过程