Anaulrajs2之组件篇

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

1、Angular的组件

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

2、如何建立组件

建立组件主要有三步：

• 引入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：为组件注入指定的服务；

3、组件交互

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

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

3.一、父组件向子组件传递数据

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

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

 

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

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

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

经过setter和getter拦截输入属性

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

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

3.二、从子组件向父组件传递数据 

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

 

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

 

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

 

 

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

 

 

 

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

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