Anaulrajs2之组件篇

组件（Component）是构成Angular应用的基础核心，通俗的说就是一个组件包含了一个特定的功能，并且组件之间协同工作以组装成一个完整的应用程序；举个栗子🌰，一辆汽车中包含很多个零件，部件：发动机，轮胎，变速箱等，这一个一个大大小小的零部件就是汽车的组件，当然这不是颗粒度最小的组件，发动机本身也是有很多更小的组件组成。下面我们就来看看Angular中的组件吧！

一、Angular的组件

Angular的组件是自描述的，组件可以和宿主元素进行交互，组件中可以注入服务，组件有明确的Input&Output，这样就使得每一个服务都可以独立存在，所以意味着任何一个组件都可以通过bootstrap来启动，也可以路由加载，或者在其他组件中使用，大大提高了组件的复用性；

二、如何创建组件

创建组件主要有三步：

• 引入Component修饰器；
• 建立一个普通的类，用@Component修饰
• 从@Component中设置一些元数据：selector，template等

如下图所示：

注意事项：

1. 组件修饰器：每个组件类必须要有@Component修饰才可以成为Angular组件
2. 组件元数据：selector、template等
3. 模板：每个组件都会关联一个模板，这个模板就是最终显示到页面上的，页面上的DOM元素就是此组件实例的宿主元素
4. 组件类：组件实际上是一个普通的类，仅此而已

附：元数据一览

• selector：用于定义组件在HTML代码中匹配的元素。这个参数是必须设置的，如果不设置则默认是div，因此组件无法定位准确的DOM元素。selector命名方式是“烤肉串式”，eg.hello-world，app-contact；
• template：为组件指定一个内联模板；
• templateUrl：为组件指定一个外联模板，指定外联模板的URL地址，与template只能指定其中有一个，不能重复；
• styles：为组件指定內联样式
• styleUrls：为组件指定一系列外联样式表文件；和styles可以重复指定，如果同时指定，则styleUrls会覆盖styles；
• directives：用来引入其他指令或组件，使得在模版中可以使用指令或组件列表；注意：自定义的组件必须在使用前声明，否则无法使用
• pipes：指定在模板中使用的管道，一般用来格式化数据
• providers／viewProviders：为组件注入指定的服务；

三、组件交互

　　一个组件可以指定输入或输出的属性，这是构成组件式自描述的原因之一。输入输出的属性可以使用属性修饰器@Input和@Output来修饰，然后通过（）和[]的语法来调用。有了输入输出熟悉组件间的交互就可以很简单了。从之前的描述我们可以知道Angular应用是由各式各样的组件组成的，这些组件形成了一颗完整组件树，数据就在这颗组件树中进行交互。那么组件与组件是怎样交互的？包括父子组件间的，兄弟组件间的数据传递。下面介绍三种组件交互：

• 从父组件向子组件传递数据
• 从子组件向父组件传递数据

3.1、父组件向子组件传递数据

从父组件到子组件主要是通过输入属性来完成交互的。数据由父组件的输入属性绑定流入子组件，在子组件完成接收或拦截，以此实现数据从上而下的数据传递，

在父组件的模板中使用属性（contactDetail），在子组件中用@Input修饰器修饰contactDetail属性，如下图所示

 

父组件把contact对象传递给输入属性contactDetail，然后子组件通过这个@Input()修饰器来获取数据，成功获得父组件传递过来的数据。

因为Angularjs应用是由各式各样的组件组成，当应用被启动时，angular会从根组件开始启动，并解析整棵组件树，数据由上而下流向下一级子组件，不过目标属性必须通过输入属性明确标记修饰才可以接收来自父组件的数据。

但是有时候，拿到数据后可以对数据进一步封装处理，可以把复杂的内部逻辑用访问权限来隔绝外部调用，以避免外部的错误调用影响到内部的状态，同时也是吧内部负责的逻辑结构封装成高度抽象可被简单调用的属性，以方便使用者调用，为了实现这个功能，我们可以采取setter和getter拦截输入属性

通过setter和getter拦截输入属性

组件可以通过属性setter来拦截来自父组件的数据源，并对拦截到的数据进行再处理，如下图所示，父组件不变，在子组件中变为如下所示：

书籍流入子组件后被setter拦截器拦截，对数据进行加工处理，使得数据处理的自由度更好，数据的展示更符合预期。

3.2、从子组件向父组件传递数据 

子组件通过暴露一个EventEmitter属性，这个属性是输出属性，由@Output修饰，当有用户行为操作发生时该事件会被触发，父组件则通过事件的绑定方式来订阅来自子组件中触发的事件，即在子组件中具体事件触发时会发生在父组件中，示例如下：

 

上图是在子组件中绑定了一个事件，当点击该链接，则会触发goDetail函数并吧参数传入；

 

上图是子组件中声明了一个输出属性，同时在函数里面我们可以看到，这个输出属性把参数一并丢给了父组件。

 

 

上图是父组件模版中监听了子组件中的事件（collect），当子组件collect触发时，则父组件就会监听到并且触发相应的事件（onCollected（$event））

 

 

 

上图是父组件中onCollected事件逻辑

通过上述的流程我们可以看到，父组件通过事件绑定的方式来监听是否有来自子组件对应的事件被触发，当对应的事件通过emit方法触发后，在父组件中能够监听到该事件，以此来完成相应的代码逻辑