Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知

道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一

个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对

作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内

容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们

想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指

令来实现。

组件与指令

相比于指令,组件不仅仅是单纯要实现某项功能(TS 代码 )之外,它还包含了

与此功能相关的视图。我们在视图中利用属性绑定、事件绑定等打通 TS 逻辑代

码,实现 HTML 片段与相关逻辑的封装。

指令与依赖注入

正式因为指令直接作用于宿主对象,增强宿主元素的功能,因此指令必须要有

操纵宿主元素的能力。Angular 提供了简单的方法来得到宿主元素的对象,那

就是通过依赖注入来获得 ViewContainer 和 ElementRef 两个对象。

如同人的多面性一样,这两个对象虽然都指代宿主元素,却反映了元素的不同

属性,这取决于我们如何使用这个宿主元素。

假如我们想在宿主元素下创建一个组件或者嵌入式视图,那么此时我们就把宿

主元素当做一个所谓的 ViewContainer 对象。假如我们想将操作宿主元素这个

对象,将其当做一般的页面元素来处理,比如修改它的属性,注册一个事件 ,

那么就是把它当做一个 ElementRef 对象。

总结

因此可以说指令是将一系列可重用的功能附加到现有的元素上,而组件是把一

系列可重用的功能还有与之相关的元素封装到一起。

参考链接

@Directive v/s @Component in Angular

发表评论

电子邮件地址不会被公开。 必填项已用*标注