组件（Component）是构成Angular应用的基础核心，通俗的说就是一个组件包含了一个特定的功能，并且组件之间协同工作以组装成一个完整的应用程序；举个栗子??，一辆汽车中包含很多个零件，部件：发动机，轮胎，变速箱等，这一个一个大大小小的零部件就是汽车的组件，当然这不是颗粒度最小的组件，发动机本身也是有很多更小的组件组成。下面我们就来看看Angular中的组件吧！
一、Angular的组件
Angular的组件是自描述的，组件可以和宿主元素进行交互，组件中可以注入服务，组件有明确的Input&Output，这样就使得每一个服务都可以独立存在，所以意味着任何一个组件都可以通过bootstrap来启动，也可以路由加载，或者在其他组件中使用，大大提高了组件的复用性；
二、如何创建组件
创建组件主要有三步：
- 引入Component修饰器；
- 建立一个普通的类，用@Component修饰
- 从@Component中设置一些元数据：selector，template等
如下图所示：
注意事项：
- 组件修饰器：每个组件类必须要有@Component修饰才可以成为Angular组件
- 组件元数据：selector、template等
- 模板：每个组件都会关联一个模板，这个模板就是最终显示到页面上的，页面上的DOM元素就是此组件实例的宿主元素
- 组件类：组件实际上是一个普通的类，仅此而已
附：元数据一览
- 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来修饰，然后通过（）和[]的语法来调用
时间： 2024-12-12 16:48:50