angular中的@Component装饰器怎么使用

今天小编给大家分享一下angular中的@Component装饰器怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1.1 @Component 装饰器的用途声明一个组件时，在组件类的之上要用@Component装饰器来告知Angular这是一个组件。1.2 @Component 装饰器的常用选项@Component 装饰器继承于 Directive ，这个css选择器用于在模板中标记出该指令，并触发该指令的实例化。1.2.1 继承自@Directive装饰器的选项1.2.2 @Component自己特有的选项可使用下列形式之一：element-name： 根据元素名选取[attribute]： 根据属性名选取.class： 根据类名选取[attribute=value]： 根据属性名和属性值选取not(sub_selector)： 只有当元素不匹配子选择器 sub_selector 的时候才选取selector1, selector2： 无论 selector1 还是 selector2 匹配时都选取2.1 element-name： 根据元素名选取2.2 [attribute]： 根据属性名选取2.3 .class： 根据类名选取使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。
Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。注意属性的值默认为变量，如果直接使用属性值，需要加字符串单引号或者双引号，变量直接在组件里定义即可对于事件处理：它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。3.1 attribute 和 propertyproperty：dom元素作为对象附加的内容，例如childNodes、firstChild等attribute：HTML标签特性是dom节点自带的属性异同：部分属性既属于 property ，又属于 attribute ，比如 idattribute 初始化后不会再改变； property 默认值为初始值，会随着 dom 更新所以在 angular2 中双向绑定实现是由 dom 的 property 实现的，所以指令绑定的是 property ，但是在某些情况下 dom 不存在某个 property 比如 colspan，rowspan 等，这时想要绑定 html 标签特性需要用到 attr:3.2 使用 host 绑定 class3.3 使用 host 绑定 style3.4 使用 host 绑定事件供模板和 CSS 样式使用的样式封装策略。4.1 Web Components通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，并且不会干扰页面上的其他元素。Web Components 由以下四种技术组成：Custom Elements: 自定义元素HTMLTemplates: HTML模板Shadow DOM: 影子DOMHTMLImports: HTML导入4.2 Shadow DOM我不在ShadowHost内4.3 ViewEncapsulationViewEncapsulation 允许设置三个可选的值：ViewEncapsulation.Emulated: 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响免费云主机域名。这是 Angular 的默认设置。ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性ViewEncapsulation.None: 无 Shadow DOM，并且也无样式包装4.3.1 ViewEncapsulation.NoneHello{{name}}ViewEncapsulation.None 设置的结果是没有 Shadow DOM，并且所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉。4.3.2 ViewEncapsulation.EmulatedViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为 .greet 类创建了一个 [_ngcontent-cmy-0] 选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用来实现局部的样式。4.3.3 ViewEncapsulation.ShadowDomViewEncapsulation.ShadowDom 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染。以上就是“angular中的@Component装饰器怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。

相关推荐: C++中string库函数的作用是什么和怎么使用

本文小编为大家详细介绍“C++中string库函数的作用是什么和怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“C++中string库函数的作用是什么和怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。strlen函数是…