Anaulrajs2之组件篇

标签：方式   sel   strong   amp   应用   提高   tac   输出   文件   

组件（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来修饰，然后通过（）和[]的语法来调用

Anaulrajs2之组件篇

标签：方式   sel   strong   amp   应用   提高   tac   输出   文件   

原文地址：http://www.cnblogs.com/Henry-World/p/6507617.html