Deep understanding of @Component decorator in angular

1. @Component Decorator

1.1 Purpose of @Component Decorator

When declaring a component, the @Component decorator must be used on the component class to tell Angular that this is a component. [Related tutorial recommendation: "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 Common options of @Component decorator

@Component decorator inherits from Directive . This css selector is used to mark the directive in the template and trigger the instantiation of the directive.

1.2.1继承自@Directive装饰器的选项

1.2.2 @Component自己特有的选项

2. selector selector

can use one of the following forms:

• element-name : select
• [attribute] based on the element name: select
• .class based on the attribute name: select [attribute=value] based on the class name
: select
• not(sub_selector)
• [attribute=value] on the attribute name and attribute value
• not(sub_selector) : select selector1, selector2 only when the element does not match the sub-selector sub_selector
• selector1, selector2

2.1 is selected whether selector1 or selector2 matches element-name : select

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

<app-element></app-element>

2.2 [attribute] : Select

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

<div app-element></div>

2.3 .class : Select

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

<div class="app-element"></div>

3. host : {[key:string]:string}

uses a set of key-value pairs to map the properties of the class to the binding of the host element (Property , Attributes and events).
Angular automatically checks host Property bindings during change detection. If the bound value changes, Angular updates the directive's host element.

• When the key is a Property of the host element, the Property value will be propagated to the specified DOM attribute.
• When the key is a static Attribute in the DOM, the Attribute value will be propagated to the Property specified on the host element.
• Note that the value of the attribute defaults to a variable. If you use the attribute value directly, you need to add single quotes or double quotes to the string. The variable can be directly defined in the component

for event processing:

• its key is the DOM event that the instruction wants to monitor. To listen to a global event, add the target you want to listen to in front of the event name. The target can be window, document, or body.
• Its value is the statement to be executed when the event occurs. If this statement returns false, the preventDefault function of this DOM event will be called. The local variable $event can be referenced in this statement to obtain event data.

3.1 attribute and property

• property: DOM element is the content attached to the object, such as childNodes, firstChild, etc.
• Attribute: HTML tag attribute is the attribute that comes with the DOM node.

Similarities and differences:

• some attributes belong to both property and attribute. For example, the id
• attribute will not be initialized after initialization. Change again; the default value of the property is the initial value and will be updated with the dom.

Therefore,双向binding implementation in angular2 is implemented by dom 的property , so the instruction is bound to the property, but in some cases the dom does not exist. Property such as colspan, rowspan, etc. If you want to bind html tag properties, you need to use attr :

<table width="100%" border="10px solid">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>January</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>February</td>
  </tr>
</table>

let colnum:number = 2;

3.2 Use host to bind class

@Component({
    selector: '.app-element',
    template: './element.component.html',
    styleUrls: ['./element.component.css'],
    host: {
        '[class.default-class]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // Let the host element also use element.component.css style. Otherwise, capsules are used by default to avoid CSS pollution.
})
export class AppElementComponent {
  @Input() useDefault = true;
}

<div class="app-element"></div>

3.3 Use host binding style

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

<div class="app-element"></div>

3.4 Use host to bind events

@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);
  }
}

<div class="app-element"></div>

4. encapsulation (encapsulation)

Style encapsulation strategy for templates and CSS styles.

4.1 Web Components

encapsulate a component in a standardized and non-intrusive way. Each component can organize its own HTML structure, CSS style, and JavaScript code without不会干扰other elements on the page.

Web Components consists of the following four technologies:

• Custom Elements: Custom element HTML
• Templates: HTML template
• Shadow DOM: Shadow DOMHTML
• Imports: HTML import

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM</title>
    <style type="text/css">
        .shadowroot_son {
            color: #f00;
        }
    </style>
</head>
<body>
<p>I am not in Shadow Host</p>
<div>Hello, world!</div>
<script>
 // shadow host
 var shadowHost = document.querySelector('.shadowhost');
 // Create shadow root (shadow root)
 var shadowRoot = shadowHost.createShadowRoot();
 // The shadow root is the first node of the shadow tree, and other nodes such as the p node are its child nodes.
 shadowRoot.innerHTML = '<p>I am in Shadow Host</p>';
</script>
</body>
<html>

4.3 ViewEncapsulation

ViewEncapsulation allows setting three optional values:

• ViewEncapsulation.Emulated: No Shadow DOM, but the component is encapsulated through the style packaging mechanism provided by Angular, so that the component's style is not affected by external influences. This is Angular's default setting.
• ViewEncapsulation.ShadowDom: Use the native Shadow DOM feature
• ViewEncapsulation.None: No Shadow DOM, and no style packaging

4.3.1 ViewEncapsulation.None

import { Component, ViewEncapsulation } from '@angular/core';

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

The result of setting ViewEncapsulation.None is that there is no Shadow DOM , and all styles are applied to整个document . In other words, the style of the component will受外界影响and may be覆盖.

4.3.2 ViewEncapsulation.Emulated

import { Component, ViewEncapsulation } from '@angular/core';

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

The result of the ViewEncapsulation.Emulated setting is that there is no Shadow DOM , but the component is encapsulated through样式包装机制provided by Angular so that the component's style不受外部影响. Although the style is still applied to整个document , Angular creates a [_ngcontent-cmy-0] selector for the .greet class. It can be seen that为组件定义的样式，被Angular 修改了. Among them, _nghost-cmy- 和_ngcontent-cmy- are used to实现局部的样式.

4.3.3 ViewEncapsulation.ShadowDom

import { Component, ViewEncapsulation } from '@angular/core';

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

The result of the ViewEncapsulation.ShadowDom setting is to use the native Shadow DOM feature. Angular will Shadow DOM 形式渲染supported by the browser.