Comprensión profunda del decorador @Component en angular

1. @Component Decorator

1.1 Propósito del @Component Decorator

Al declarar un componente, el decorador @Component debe usarse en la clase de componente para indicarle a Angular que se trata de un componente. [Recomendación de tutorial relacionado: "tutorial angular"]

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

@Componente({
  selector: 'alertas-producto-aplicación',
  URL de plantilla: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
clase de exportación ProductAlertsComponent implementa OnInit {

  constructor() { }

  ngOnInit() {
  }

}

1.2 Opciones comunes del decorador @Component

El decorador @Component hereda de Directive . Este selector CSS se utiliza para marcar la directiva en la plantilla y activar la creación de instancias de la directiva.

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

1.2.2 @Component自己特有的选项

2. selector

puede usar una de las siguientes formas:

• element-name : seleccione
• [attribute] según el nombre del elemento: seleccione
• .class según el nombre del atributo: seleccione [atributo = valor] según el nombre de la clase
: seleccione
• not(sub_selector) : seleccione selector1, selector2 solo cuando el elemento no coincida con el subselector sub_selector
• selector1, selector2

2.1 se selecciona si el selector1 o el selector2 coinciden con element-name : seleccione

@Component({
    selector: 'elemento-aplicación',
    plantilla: './element.component.html',
    URL de estilo: ['./element.component.css']
})

<elemento-aplicación></elemento-aplicación>

2.2 [attribute] : seleccione

@Component({
    selector: '[elemento-aplicación]',
    plantilla: './element.component.html',
    URL de estilo: ['./element.component.css']
})

<div elemento-aplicación></div>

2.3 .class : Seleccione

@Component({
    selector: '.elemento-aplicación',
    plantilla: './element.component.html',
    URL de estilo: ['./element.component.css']
})

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

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

usa un conjunto de pares clave-valor para asignar las propiedades de la clase al enlace del host elemento (Propiedad, Atributos y eventos).
Angular verifica automáticamente los enlaces de propiedades del host durante la detección de cambios. Si el valor vinculado cambia, Angular actualiza el elemento host de la directiva.

• Cuando la clave es una propiedad del elemento host, el valor de la propiedad se propagará al atributo DOM especificado.
• Cuando la clave es un atributo estático en el DOM, el valor del atributo se propagará a la propiedad especificada en el elemento host.
• Tenga en cuenta que el valor del atributo por defecto es una variable. Si usa el valor del atributo directamente, debe agregar comillas simples o dobles a la cadena. La variable se puede definir directamente en el componente

para el procesamiento de eventos:

• su clave es. Evento DOM que la instrucción quiere monitorear. Para escuchar un evento global, agregue el destino que desea escuchar delante del nombre del evento. El destino puede ser una ventana, un documento o un cuerpo.
• Su valor es la declaración que se ejecutará cuando ocurra el evento. Si esta declaración devuelve falso, se llamará a la función preventDefault de este evento DOM. Se puede hacer referencia a la variable local $event en esta declaración para obtener datos del evento.

3.1 attribute y property

• propiedad: el elemento DOM es el contenido adjunto al objeto, como childNodes, firstChild, etc.
• Atributo: el atributo de etiqueta HTML es el atributo que viene con el nodo DOM

Similitudes y diferencias:

• algunos atributos pertenecen tanto a la propiedad como a la propiedad. atributo Por ejemplo, el
• atributo id no se inicializará después de la inicialización. Cambie nuevamente; el valor predeterminado de la propiedad es el valor inicial y se actualizará con dom.

Por lo tanto, la implementación dom 的property enlace双向en angular2 es. dom 的property , por lo que la instrucción está vinculada a la propiedad, pero en algunos casos el dom no existe Propiedad como colspan, rowspan, etc. Si desea vincular las propiedades de la etiqueta html, debe usar attr :

<table ancho="100%" borde="10px sólido">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Enero</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>febrero</td>
  </tr>
</tabla>

let colnum:number = 2;

3.2 Usar host para vincular class

@Component({
    selector: '.elemento-aplicación',
    plantilla: './element.component.html',
    URL de estilo: ['./element.component.css'],
    anfitrión: {
        '[clase.clase-default]': 'useDefault'
    },
    encapsulación: ViewEncapsulation.None // Deje que el elemento host también use el estilo element.component.css. De lo contrario, las cápsulas se utilizan de forma predeterminada para evitar la contaminación de CSS.
})
exportar clase AppElementComponent {
  @Input() useDefault = verdadero;
}

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

3.3 Usar style de enlace host

@Component({
    selector: '.elemento-aplicación',
    plantilla: './element.component.html',
    URL de estilo: ['./element.component.css'],
    anfitrión: {
        '[estilo.fondo]': 'entradaFondo'
    }
})
exportar clase AppElementComponent {
  @Input() inputBackground = 'rojo';
}

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

3.4 Usar host para vincular eventos

@Component({
    selector: '.elemento-aplicación',
    plantilla: './element.component.html',
    URL de estilo: ['./element.component.css'],
    anfitrión: {
        '(clic)': 'onClick($evento)'
    }
})
exportar clase AppElementComponent {
  público al hacer clic ($evento) {
    console.log($evento);
  }
}

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

4. encapsulation (encapsulación)

Estrategia de encapsulación de estilos para plantillas y estilos CSS.

4.1 Los componentes web

encapsulan un componente de forma estandarizada y no intrusiva. Cada componente puede organizar su propia estructura HTML, estilo CSS y código JavaScript sin不会干扰otros elementos de la página.

Los componentes web constan de las siguientes cuatro tecnologías:

• Elementos personalizados: elemento personalizado
• Plantillas HTML: plantilla HTML
• Shadow DOM: Shadow DOMHTML
• Importaciones: importación HTML

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<cabeza>
    <meta juego de caracteres="UTF-8">
    <título>DOM en la sombra</título>
    <tipo de estilo="texto/css">
        .shadowroot_son {
            color: #f00;
        }
    </estilo>
</cabeza>
<cuerpo>
<p>No estoy en Shadow Host</p>
<div>¡Hola mundo!</div>
<guión>
 // host en la sombra
 var shadowHost = document.querySelector('.shadowhost');
 // Crear raíz de sombra (raíz de sombra)
 var ShadowRoot = ShadowHost.createShadowRoot();
 // La raíz de la sombra es el primer nodo del árbol de la sombra, y otros nodos como el nodo p son sus nodos secundarios.
 shadowRoot.innerHTML = '<p>Estoy en Shadow Host</p>';
</script>
</cuerpo>
<html>

4.3 ViewEncapsulation

ViewEncapsulation permite establecer tres valores opcionales:

• ViewEncapsulation.Emulated: No Shadow DOM, pero el componente se encapsula a través del mecanismo de empaquetado de estilos proporcionado por Angular, de modo que el estilo del componente no se ve afectado por influencias externas. Esta es la configuración predeterminada de Angular.
• ViewEncapsulation.ShadowDom: utiliza la función nativa Shadow DOM
• ViewEncapsulation.None: sin Shadow DOM y sin empaquetado de estilo

4.3.1 ViewEncapsulation.None

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

@Componente({
  selector: 'mi-aplicación',
  plantilla: `
    <h4>Bienvenido al mundo angular</h4>
    <p class="greet">Hola {{name}}</p>
  `,
  estilos: [`
    .saludar {
      antecedentes: #369;
      color: blanco;
    }
  `],
  encapsulación: ViewEncapsulation.None // Ninguno | Emulado |
})
exportar clase AppComponent {
  nombre: cadena = 'Semlinker';
}

El resultado de configurar ViewEncapsulation.None es que no hay Shadow DOM y todos los estilos se aplican a整个document . En otras palabras, el estilo del componente se受外界影响y puede覆盖.

4.3.2 ViewEncapsulation.Emulated

{Componente, ViewEncapsulation} de '@angular/core';

@Componente({
  selector: 'mi-aplicación',
  ...,
  encapsulación: ViewEncapsulation.Emulated // Ninguno | ShadowDom
})
exportar clase AppComponent {
  nombre: cadena = 'Semlinker';
}

El resultado de la configuración ViewEncapsulation.Emulated es que no hay Shadow DOM , pero el componente se encapsula a través样式包装机制proporcionado por Angular para que el estilo del componente不受外部影响. Aunque el estilo todavía se aplica a整个document , Angular crea un selector [_ngcontent-cmy-0] para la clase .greet . Se puede ver que为组件定义的样式，被Angular 修改了. Entre ellos, _nghost-cmy- 和_ngcontent-cmy- se utilizan para实现局部的样式.

4.3.3 ViewEncapsulation.ShadowDom

import {Componente, ViewEncapsulation} desde '@angular/core';

@Componente({
  selector: 'mi-aplicación',
  ...,
  encapsulación: ViewEncapsulation.ShadowDom // Ninguno | Emulado |
})
exportar clase AppComponent {
  nombre: cadena = 'Semlinker';
}

El resultado de la configuración ViewEncapsulation.ShadowDom es utilizar la característica nativa Shadow DOM . Angular Shadow DOM 形式渲染admitido por el navegador.