Deep understanding of @Component decorator in angular

Component is a subclass of Directive. It is a decorator used to mark a class as aAngularcomponent. The following article will give you an in-depth understanding of the @Component decorator in angular. I hope it will be helpful to you.

1.@ComponentDecorator

1.1@ComponentPurpose of decorator

When declaring a component, use the @Component decorator on top of the component class. Tells Angular that this is a component. [Related tutorial recommendations: "angular tutorial"]

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', styleUrls: ['./product-alerts.component.css'] }) export class ProductAlertsComponent implements OnInit { constructor() { } ngOnInit() { } }

1.2@ComponentCommon options for decorators

@ComponentThe decorator inherits fromDirective. This css selector is used to mark the directive in the template. and triggers the instantiation of this directive.

1.2.1Options inherited from @Directive decorator

1.2.2@Component’s own options

二、selector选择器

可使用下列形式之一：

• element-name： 根据元素名选取
• [attribute]： 根据属性名选取
• .class： 根据类名选取
• [attribute=value]： 根据属性名和属性值选取
• not(sub_selector)： 只有当元素不匹配子选择器 sub_selector 的时候才选取
• selector1, selector2： 无论 selector1 还是 selector2 匹配时都选取

2.1element-name： 根据元素名选取

@Component({ selector: 'app-element', template: './element.component.html', styleUrls: ['./element.component.css'] })

2.2[attribute]： 根据属性名选取

@Component({ selector: '[app-element]', template: './element.component.html', styleUrls: ['./element.component.css'] })

2.3.class： 根据类名选取

@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'] })

三、host:{[key:string]:string}

使用一组键-值对，把类的属性映射到宿主元素的绑定（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.1attribute和property

• property：dom元素作为对象附加的内容，例如childNodes、firstChild等
• attribute：HTML标签特性是dom节点自带的属性

异同：

• 部分属性既属于 property ，又属于 attribute ，比如 id
• attribute 初始化后不会再改变； property 默认值为初始值，会随着 dom 更新

所以在 angular2 中双向绑定实现是由dom 的 property实现的，所以指令绑定的是 property ，但是在某些情况下 dom 不存在某个 property 比如 colspan，rowspan 等，这时想要绑定 html 标签特性需要用到attr:

 
 
Month
 
Savings
 
 
 
January
 
 
 
February
 
 
 let colnum:number = 2;

3.2 使用host绑定class

@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'], host: { '[class.default-class]': 'useDefault' }, encapsulation: ViewEncapsulation.None // 让宿主元素也用上 element.component.css 样式。否则，默认胶囊封装避免CSS污染。 }) export class AppElementComponent { @Input() useDefault = true; }

3.3 使用host绑定style

@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'], host: { '[style.background]': 'inputBackground' } }) export class AppElementComponent { @Input() inputBackground = 'red'; }

3.4 使用host绑定事件

@Component({ selector: '.app-element', template: './element.component.html', styleUrls: ['./element.component.css'], host: { '(click)': 'onClick($event)' } }) export class AppElementComponent { public onClick($event) { console.log($event); } }

四、encapsulation（封装）

供模板和 CSS 样式使用的样式封装策略。

4.1 Web Components

通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，并且不会干扰页面上的其他元素。

Web Components 由以下四种技术组成：

• Custom Elements: 自定义元素HTML
• Templates: HTML模板
• Shadow DOM: 影子DOMHTML
• Imports: HTML导入

4.2 Shadow DOM

      
  
我不在 Shadow Host内
 
Hello, world!
   

4.3ViewEncapsulation

ViewEncapsulation 允许设置三个可选的值：

• ViewEncapsulation.Emulated: 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是 Angular 的默认设置。
• ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
• ViewEncapsulation.None: 无 Shadow DOM，并且也无样式包装

4.3.1ViewEncapsulation.None

import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'my-app', template: ` 
Welcome to Angular World
 
Hello {{name}}
 `, styles: [` .greet { background: #369; color: white; } `], encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom }) export class AppComponent { name: string = 'Semlinker'; }

ViewEncapsulation.None设置的结果是没有Shadow DOM，并且所有的样式都应用到整个document，换句话说，组件的样式会受外界影响，可能被覆盖掉。

4.3.2ViewEncapsulation.Emulated

import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'my-app', ..., encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom }) export class AppComponent { name: string = 'Semlinker'; }

ViewEncapsulation.Emulated设置的结果是没有Shadow DOM，但是通过Angular提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为.greet类创建了一个[_ngcontent-cmy-0]选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。其中的_nghost-cmy- 和 _ngcontent-cmy-用来实现局部的样式。

4.3.3ViewEncapsulation.ShadowDom

import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'my-app', ..., encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom }) export class AppComponent { name: string = 'Semlinker'; }

ViewEncapsulation.ShadowDom设置的结果是使用原生的Shadow DOM特性。Angular 会把组件按照浏览器支持的Shadow DOM 形式渲染。

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Deep understanding of @Component decorator in angular. For more information, please follow other related articles on the PHP Chinese website!