Compréhension approfondie du décorateur @Component en angulaire

1. @Component Decorator

1.1 Objectif du @Component Decorator

Lors de la déclaration d'un composant, le décorateur @Component doit être utilisé sur la classe du composant pour indiquer à Angular qu'il s'agit d'un composant. [Recommandation de didacticiel associée : "tutoriel angulaire"]

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

@Composant({
  sélecteur : 'app-product-alerts',
  templateUrl : './product-alerts.component.html',
  styleUrls : ['./product-alerts.component.css']
})
classe d'exportation ProductAlertsComponent implémente OnInit {

  constructeur() { }

  ngOnInit() {
  }

}

1.2 Options communes du décorateur @Component

Le décorateur @Component hérite de Directive Ce sélecteur CSS est utilisé pour marquer la directive dans le modèle et déclencher l'instanciation de la directive.

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

1.2.2 @Component自己特有的选项

2. selector

peut utiliser l'une des formes suivantes :

• element-name : sélectionnez
• [attribute] en fonction du nom de l'élément : sélectionnez
• .class en fonction du nom de l'attribut : sélectionnez [attribut=valeur] en fonction du nom de la classe
 : sélectionnez
• not(sub_selector) : sélectionnez selector1, selector2 uniquement lorsque l'élément ne correspond pas au sous-sélecteur sub_selector
• selector1, selector2

2.1 est sélectionné, que le selector1 ou le selector2 corresponde element-name : select

@Component({
    sélecteur : 'app-element',
    modèle : './element.component.html',
    styleUrls : ['./element.component.css']
})

<app-element></app-element>

2.2 [attribute] : Sélectionnez

@Component({
    sélecteur : '[app-element]',
    modèle : './element.component.html',
    styleUrls : ['./element.component.css']
})

<div app-element></div>

2.3 .class : Sélectionnez

@Component({
    sélecteur : '.app-element',
    modèle : './element.component.html',
    styleUrls : ['./element.component.css']
})

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

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

utilise un ensemble de paires clé-valeur pour mapper les propriétés de la classe à la liaison de l'hôte élément (Propriété, Attributs et événements).
Angular vérifie automatiquement les liaisons de propriété hôte lors de la détection des modifications. Si la valeur liée change, Angular met à jour l'élément hôte de la directive.

• Lorsque la clé est une propriété de l'élément hôte, la valeur de la propriété sera propagée à l'attribut DOM spécifié.
• Lorsque la clé est un attribut statique dans le DOM, la valeur de l'attribut sera propagée à la propriété spécifiée sur l'élément hôte.
• Notez que la valeur par défaut de l'attribut est une variable. Si vous utilisez directement la valeur de l'attribut, vous devez ajouter des guillemets simples ou doubles à la chaîne. La variable peut être directement définie dans le composant

pour le traitement des événements :

• sa clé est la. Événement DOM que l’instruction souhaite surveiller. Pour écouter un événement global, ajoutez la cible que vous souhaitez écouter devant le nom de l'événement. La cible peut être une fenêtre, un document ou un corps.
• Sa valeur est l'instruction à exécuter lorsque l'événement se produit. Si cette instruction renvoie false, la fonction PreventDefault de cet événement DOM sera appelée. La variable locale $event peut être référencée dans cette instruction pour obtenir des données d'événement.

3.1 attribute et property

•  : l'élément DOM est le contenu attaché à l'objet, tel que childNodes, firstChild, etc.
• Attribut : l'attribut de balise HTML est l'attribut fourni avec le nœud DOM.

Similitudes et différences :

• certains attributs appartiennent à la fois à la propriété et à la propriété. Par exemple, l'attribut id
• ne sera pas initialisé après l'initialisation. Changez à nouveau ; la valeur par défaut de la propriété est la valeur initiale et sera mise à jour avec le dom.

Par conséquent,双向dans dom 的property est implémentée. dom 的property , donc l'instruction est liée à la propriété, mais dans certains cas, le dom n'existe pas. Propriété telle que colspan, rowspan, etc. Si vous souhaitez lier les propriétés de la balise html, vous devez utiliser attr :

<table. width="100%" border="10px solid">
  <tr>
    <th>Mois</th>
    <th>Économies</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Janvier</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Février</td>
  </tr>
</table>

let colnum:number = 2;

3.2 Utiliser host pour lier class

@Component({
    sélecteur : '.app-element',
    modèle : './element.component.html',
    styleUrls : ['./element.component.css'],
    hôte: {
        '[class.default-class]' : 'useDefault'
    },
    encapsulation : ViewEncapsulation.None // Laissez l'élément hôte utiliser également le style element.component.css. Sinon, des capsules sont utilisées par défaut pour éviter la pollution CSS.
})
classe d'exportation AppElementComponent {
  @Input() useDefault = true;
}

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

3.3 Utiliser style de liaison host

@Component({
    sélecteur : '.app-element',
    modèle : './element.component.html',
    styleUrls : ['./element.component.css'],
    hôte: {
        '[style.background]' : 'inputBackground'
    }
})
classe d'exportation AppElementComponent {
  @Input() inputBackground = 'rouge';
}

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

3.4 Utiliser host pour lier les événements

@Component({
    sélecteur : '.app-element',
    modèle : './element.component.html',
    styleUrls : ['./element.component.css'],
    hôte: {
        '(clic)' : 'onClick($événement)'
    }
})
classe d'exportation AppElementComponent {
  public onClick ($ événement) {
    console.log($événement);
  }
}

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

4. encapsulation (encapsulation)

Stratégie d'encapsulation de style pour les modèles et les styles CSS.

4.1 Les composants Web

encapsulent un composant de manière standardisée et non intrusive. Chaque composant peut organiser sa propre structure HTML, son style CSS et son code JavaScript sans不会干扰les autres éléments de la page.

Les composants Web se composent des quatre technologies suivantes :

• Éléments personnalisés : élément personnalisé
• Modèles HTML : modèle HTML
• Shadow DOM : Shadow DOM
• Importations HTML : importation HTML

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<tête>
    <méta charset="UTF-8">
    <titre>Shadow DOM</title>
    <style type="text/css">
        .shadowroot_son {
            couleur : #f00 ;
        }
    </style>
</tête>
<corps>
<p>Je ne suis pas dans Shadow Host</p>
<div>Bonjour tout le monde !</div>
<script>
 // hôte fantôme
 var shadowHost = document.querySelector('.shadowhost');
 // Créer une racine fantôme (racine fantôme)
 var shadowRoot = shadowHost.createShadowRoot();
 // La racine fantôme est le premier nœud de l'arbre fantôme, et d'autres nœuds tels que le nœud p sont ses nœuds enfants.
 shadowRoot.innerHTML = '<p>Je suis dans Shadow Host</p>';
</script>
</corps>
<html>

4.3 ViewEncapsulation

ViewEncapsulation permet de définir trois valeurs facultatives :

• ViewEncapsulation.Emulated : Pas de Shadow DOM, mais le composant est encapsulé via le mécanisme d'empaquetage de style fourni par Angular, de sorte que le style du composant ne soit pas affecté par des influences externes. Il s'agit du paramètre par défaut d'Angular.
• ViewEncapsulation.ShadowDom : utiliser la fonctionnalité native Shadow DOM
• ViewEncapsulation.None : pas de Shadow DOM et aucun emballage de style

4.3.1 ViewEncapsulation.None

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

@Composant({
  sélecteur : 'mon-application',
  modèle : `
    <h4>Bienvenue dans le monde angulaire</h4>
    <p class="greet">Bonjour {{name}}</p>
  ',
  styles : [`
    .saluer {
      arrière-plan : #369 ;
      couleur : blanc ;
    }
  `],
  encapsulation : ViewEncapsulation.None // Aucun émulé | ShadowDom
})
classe d'exportation AppComponent {
  nom : chaîne = 'Semlinker' ;
}

Le résultat de la définition de ViewEncapsulation.None est qu'il n'y a pas Shadow DOM et que tous les styles sont appliqués à整个document . En d'autres termes, le style du composant受外界影响et peut être覆盖.

4.3.2 ViewEncapsulation.Emulated

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

@Composant({
  sélecteur : 'mon-application',
  ...,
  encapsulation : ViewEncapsulation.Emulated // Aucun Emulated | ShadowDom
})
classe d'exportation AppComponent {
  nom : chaîne = 'Semlinker' ;
}

Le résultat du paramètre ViewEncapsulation.Emulated est qu'il n'y a pas Shadow DOM , mais le composant est encapsulé via样式包装机制fourni par Angular afin que le style du composant不受外部影响. Bien que le style soit toujours appliqué à整个document , Angular crée un sélecteur [_ngcontent-cmy-0] pour la classe .greet . On voit que为组件定义的样式，被Angular 修改了. Parmi eux, _nghost-cmy- 和_ngcontent-cmy- sont utilisés pour实现局部的样式.

4.3.3 ViewEncapsulation.ShadowDom

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

@Composant({
  sélecteur : 'mon-application',
  ...,
  encapsulation : ViewEncapsulation.ShadowDom // Aucun émulé | ShadowDom
})
classe d'exportation AppComponent {
  nom : chaîne = 'Semlinker' ;
}

Le résultat du paramètre ViewEncapsulation.ShadowDom est d'utiliser la fonctionnalité native Shadow DOM . Angular Shadow DOM 形式渲染pris en charge par le navigateur.