Compreensão profunda do decorador @Component em angular

1. Decorador @Component

1.1 Objetivo do decorador @Component

Ao declarar um componente, o decorador @Component deve ser usado na classe do componente para informar ao Angular que este é um componente. [Recomendação do tutorial relacionado: "tutorial angular"]

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

@Componente({
  seletor: 'alertas de produto de aplicativo',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
classe de exportação ProductAlertsComponent implementa OnInit {

  construtor() { }

  ngOnInit() {
  }

}

1.2 Opções comuns do @Component decorator

@Component decorator herda da Directive Este seletor css é usado para marcar a diretiva no template e acionar a instanciação da diretiva.

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

1.2.2 @Component自己特有的选项

2. selector

pode usar um dos seguintes formatos:

• element-name : selecione
• [attribute] com base no nome do elemento: selecione
• .class com base no nome do atributo: selecione [atributo = valor] com base no nome da classe
: selecione
• not(sub_selector) : selecione selector1, selector2 somente quando o elemento não corresponder ao subseletor sub_selector
• selector1, selector2

2.1 é selecionado se selector1 ou selector2 corresponder element-name : selecione

@Component({
    seletor: 'elemento do aplicativo',
    modelo: './element.component.html',
    styleUrls: ['./element.component.css']
})

<app-element></app-element>

2.2 [attribute] : Selecione

@Component({
    seletor: '[elemento do aplicativo]',
    modelo: './element.component.html',
    styleUrls: ['./element.component.css']
})

<div app-element></div>

2.3 .class : Selecione

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

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

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

usa um conjunto de pares de valores-chave para mapear as propriedades da classe para a ligação do host elemento (Propriedade, Atributos e eventos).
Angular verifica automaticamente as ligações de propriedades do host durante a detecção de alterações. Se o valor vinculado mudar, o Angular atualizará o elemento host da diretiva.

• Quando a chave é uma propriedade do elemento host, o valor da propriedade será propagado para o atributo DOM especificado.
• Quando a chave é um atributo estático no DOM, o valor do atributo será propagado para a propriedade especificada no elemento host.
• Observe que o valor do atributo é padronizado como uma variável. Se você usar o valor do atributo diretamente, será necessário adicionar aspas simples ou duplas à string. A variável pode ser definida diretamente no componente

para processamento de eventos:

• sua chave é a. Evento DOM que a instrução deseja monitorar. Para ouvir um evento global, adicione o alvo que deseja ouvir antes do nome do evento. O destino pode ser janela, documento ou corpo.
• Seu valor é a instrução a ser executada quando o evento ocorrer. Se esta instrução retornar falso, a função preventDefault deste evento DOM será chamada. A variável local $event pode ser referenciada nesta instrução para obter dados do evento.

3.1 attribute e property

• propriedade: o elemento DOM é o conteúdo anexado ao objeto, como childNodes, firstChild, etc.
• Atributo: o atributo da tag HTML é o atributo que vem com o nó DOM.

Semelhanças e diferenças:

• alguns atributos pertencem à propriedade e.

双向dom 的property

• o
• valor padrão da propriedade e será atualizado com o dom.

dom 的property , portanto a instrução está vinculada à propriedade, mas em alguns casos o dom não existe Propriedade como colspan, rowspan, etc. Se você deseja vincular as propriedades da tag html, você precisa usar attr :

<table. largura="100%" borda="10px sólido">
  <tr>
    <th>Mês</th>
    <th>Economia</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Janeiro</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Fevereiro</td>
  </tr>
</tabela>

deixe colnum:number = 2.2

Use host para vincular class

@Component({
    seletor: '.app-element',
    modelo: './element.component.html',
    styleUrls: ['./element.component.css'],
    hospedar: {
        '[class.default-class]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // Deixe o elemento Host também usar o estilo element.component.css. Caso contrário, as cápsulas são usadas por padrão para evitar a poluição do CSS.
})
classe de exportação AppElementComponent {
  @Input() useDefault = true;
}

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

3.3 Use style de ligação host

@Component({
    seletor: '.app-element',
    modelo: './element.component.html',
    styleUrls: ['./element.component.css'],
    hospedar: {
        '[estilo.background]': 'inputBackground'
    }
})
classe de exportação AppElementComponent {
  @Input() inputBackground = 'vermelho';
}

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

3.4 Use host para vincular eventos

@Component({
    seletor: '.app-element',
    modelo: './element.component.html',
    styleUrls: ['./element.component.css'],
    hospedar: {
        '(clique)': 'onClick($evento)'
    }
})
classe de exportação AppElementComponent {
  public onClick($evento) {
    console.log($evento);
  }
}

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

4. encapsulation (encapsulamento)

Estratégia de encapsulamento de estilo para templates e estilos CSS.

4.1 Os componentes da Web

encapsulam um componente de maneira padronizada e não intrusiva. Cada componente pode organizar sua própria estrutura HTML, estilo CSS e código JavaScript sem不会干扰outros elementos da página.

Os componentes da Web consistem nas quatro tecnologias a seguir:

• Elementos personalizados:
• Modelos HTML de elemento personalizado: modelo HTML
• Shadow DOM: Shadow DOM
• Importações HTML: importação de HTML

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<cabeça>
    <meta charset="UTF-8">
    <title>Shadow DOM</title>
    <style type="texto/css">
        .shadowroot_son {
            cor: #f00;
        }
    </estilo>
</head>
<corpo>
<p>Não estou no Shadow Host</p>
<div>Olá, mundo!</div>
<roteiro>
 //host sombra
 var shadowHost = document.querySelector('.shadowhost');
 // Cria raiz de sombra (raiz de sombra)
 var shadowRoot = shadowHost.createShadowRoot();
 // A raiz sombra é o primeiro nó da árvore sombra, e outros nós, como o nó p, são seus nós filhos.
 shadowRoot.innerHTML = '<p>Estou no Shadow Host</p>';
</script>
</body>
<html>

4.3 ViewEncapsulation

ViewEncapsulation permite definir três valores opcionais:

• ViewEncapsulation.Emulated: Sem Shadow DOM, mas o componente é encapsulado através do mecanismo de empacotamento de estilo fornecido pelo Angular, para que o estilo do componente não seja afetado por influências externas. Esta é a configuração padrão do Angular.
• ViewEncapsulation.ShadowDom: Use o recurso nativo Shadow DOM
• ViewEncapsulation.None: Sem Shadow DOM e sem empacotamento de estilo

4.3.1 ViewEncapsulation.None

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

@Componente({
  seletor: 'meu-app',
  modelo: `
    <h4>Bem-vindo ao mundo Angular</h4>
    <p class="greet">Olá {{name}}</p>
  `,
  estilos: [`
    .saudar {
      histórico: #369;
      cor: branco;
    }
  `],
  encapsulamento: ViewEncapsulation.None // Nenhum emulado |
})
classe de exportação AppComponent {
  nome: string = 'Semlinker';
}

O resultado da configuração de ViewEncapsulation.None é que não há Shadow DOM e todos os estilos são aplicados a整个document . Em outras palavras, o estilo do componente受外界影响e poderá ser覆盖.

4.3.2 ViewEncapsulation.Emulated

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

@Componente({
  seletor: 'meu-app',
  ...,
  encapsulamento: ViewEncapsulation.Emulated // Nenhum | Emulado |
})
classe de exportação AppComponent {
  nome: string = 'Semlinker';
}

O resultado da configuração ViewEncapsulation.Emulated é que não há Shadow DOM , mas o componente é encapsulado por meio样式包装机制fornecido pelo Angular para que o estilo do componente不受外部影响. Embora o estilo ainda seja aplicado a整个document , o Angular cria um seletor [_ngcontent-cmy-0] para a classe .greet . Pode-se observar que为组件定义的样式，被Angular 修改了. Entre eles, _nghost-cmy- 和_ngcontent-cmy- são usados ​​para实现局部的样式.

4.3.3 ViewEncapsulation.ShadowDom

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

@Componente({
  seletor: 'meu-app',
  ...,
  encapsulamento: ViewEncapsulation.ShadowDom // Nenhum Emulado |
})
classe de exportação AppComponent {
  nome: string = 'Semlinker';
}

O resultado da configuração ViewEncapsulation.ShadowDom é usar o recurso nativo Shadow DOM . Angular Shadow DOM 形式渲染suportado pelo navegador.