组件(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-10-06 19:08:25