剖析Angular Component的源码示例
WebComponent
在介绍AngularComponent之前,我们先简单了解下W3CWebComponents
定义
W3C为统一组件化标准方式,提出WebComponent的标准。
每个组件包含自己的html、css、js代码。
WebComponent标准包括以下四个重要的概念:
1.CustomElements(自定义标签):可以创建自定义HTML标记和元素;
2.HTMLTemplates(HTML模版):使用标签去预定义一些内容,但并不加载至页面,而是使用JS代码去初始化它;
3.ShadowDOM(虚拟DOM):可以创建完全独立与其他元素的DOM子树;
4.HTMLImports(HTML导入):一种在HTML文档中引入其他HTML文档的方法,
概括来说就是,可以创建自定义标签来引入组件是前端组件化的基础,在页面引用HTML文件和HTML模板是用于支撑编写组件视图和组件资源管理,而ShadowDOM则是隔离组件间代码的冲突和影响。
示例
定义hello-component
HelloWebComponent!
使用hello-component
WebComponent