Tiefes Verständnis des @Component-Dekorators in Angular

1. @Component Decorator

1.1 Zweck von @Component Decorator

Beim Deklarieren einer Komponente muss der @Component Decorator für die Komponentenklasse verwendet werden, um Angular mitzuteilen, dass es sich um eine Komponente handelt. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

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

@Komponente({
  Selektor: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
Die Exportklasse ProductAlertsComponent implementiert OnInit {

  Konstruktor() { }

  ngOnInit() {
  }

}

1.2 Allgemeine Optionen von @Component decorator

@Component decorator erbt von Directive Dieser CSS-Selektor wird verwendet, um die Direktive in der Vorlage zu markieren und die Instanziierung der Direktive auszulösen.

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

1.2.2 @Component自己特有的选项

2. selector Selektor

kann eine der folgenden Formen verwenden:

• element-name : Wählen Sie
• [attribute] basierend auf dem Elementnamen aus: Wählen Sie
• .class basierend auf dem Attributnamen aus: Wählen Sie [Attribut=Wert] basierend auf dem Klassennamen aus
: Wählen Sie
• not(sub_selector) : Wählen Sie Selector1 und Selector2 nur aus, wenn das Element nicht mit dem Subselektor übereinstimmt. Sub_selector
• selector1, selector2

2.1 wird ausgewählt, unabhängig davon, ob Selector1 oder Selector2 mit element-name übereinstimmt : Wählen Sie

@Component({
    Selektor: 'App-Element',
    Vorlage: './element.component.html',
    styleUrls: ['./element.component.css']
})

<app-element></app-element>

2.2 [attribute] : Wählen Sie

@Component({
    Selektor: '[App-Element]',
    Vorlage: './element.component.html',
    styleUrls: ['./element.component.css']
})

<div app-element></div>

2.3 .class : Wählen Sie

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

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

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

verwendet eine Reihe von Schlüssel-Wert-Paaren, um die Eigenschaften der Klasse der Bindung des Hosts zuzuordnen Element (Eigenschaft, Attribute und Ereignisse).
Angular überprüft automatisch die Host-Eigenschaftsbindungen während der Änderungserkennung. Wenn sich der gebundene Wert ändert, aktualisiert Angular das Hostelement der Direktive.

• Wenn der Schlüssel eine Eigenschaft des Hostelements ist, wird der Eigenschaftswert an das angegebene DOM-Attribut weitergegeben.
• Wenn der Schlüssel ein statisches Attribut im DOM ist, wird der Attributwert an die im Hostelement angegebene Eigenschaft weitergegeben.
• Beachten Sie, dass der Wert des Attributs standardmäßig eine Variable ist. Wenn Sie den Attributwert direkt verwenden, müssen Sie der Zeichenfolge einfache Anführungszeichen oder doppelte Anführungszeichen hinzufügen. Die Variable kann direkt in der Komponente

für die Ereignisverarbeitung definiert werden:

• Ihr Schlüssel ist DOM-Ereignis, das die Anweisung überwachen möchte. Um ein globales Ereignis abzuhören, fügen Sie das Ziel, das Sie abhören möchten, vor dem Ereignisnamen hinzu. Das Ziel kann ein Fenster, ein Dokument oder ein Textkörper sein.
• Sein Wert ist die Anweisung, die ausgeführt werden soll, wenn das Ereignis eintritt. Wenn diese Anweisung „false“ zurückgibt, wird die Funktion „preventDefault“ dieses DOM-Ereignisses aufgerufen. In dieser Anweisung kann auf die lokale Variable $event verwiesen werden, um Ereignisdaten abzurufen.

3.1 attribute und property

• Eigenschaft: DOM-Element ist der an das Objekt angehängte Inhalt, z. B. childNodes, firstChild usw.
• Attribut: HTML-Tag-Attribut ist das Attribut, das mit dem DOM-Knoten geliefert wird.

Ähnlichkeiten und Unterschiede:

• Einige Attribute gehören sowohl zur Eigenschaft als auch zum

• Beispielsweise
• wird das id-Attribut nach der Initialisierung nicht erneut initialisiert. Der Standardwert der Eigenschaft ist der Anfangswert und wird mit dem

双向dom 的property , sodass die Anweisung an die Eigenschaft gebunden ist, aber in einigen Fällen ist die Dom-Eigenschaft nicht vorhanden, z. B. Colspan, Rowspan usw. Wenn Sie HTML-Tag-Eigenschaften binden möchten, müssen Sie attr :

<table

width="100%" border="10px solid">
  <tr>
    <th>Monat</th>
    <th>Einsparungen</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Januar</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>Februar</td>
  </tr>
</table>

let colnum:number = 2;

3.2 Verwenden Sie host , um class

@Component({
    Selektor: '.app-element',
    Vorlage: './element.component.html',
    styleUrls: ['./element.component.css'],
    Gastgeber: {
        '[class.default-class]': 'useDefault'
    },
    Kapselung: ViewEncapsulation.None // Lassen Sie das Host-Element auch den Stil element.component.css verwenden. Ansonsten werden standardmäßig Kapseln verwendet, um eine CSS-Belastung zu vermeiden.
})
Exportklasse AppElementComponent {
  @Input() useDefault = true;
}

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

3.3 Verwenden Sie style host Bindungsstil

@Component({
    Selektor: '.app-element',
    Vorlage: './element.component.html',
    styleUrls: ['./element.component.css'],
    Gastgeber: {
        '[style.background]': 'inputBackground'
    }
})
Exportklasse AppElementComponent {
  @Input() inputBackground = 'red';
}

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

3.4 Verwenden Sie host , um Ereignisse zu binden

@Component({
    Selektor: '.app-element',
    Vorlage: './element.component.html',
    styleUrls: ['./element.component.css'],
    Gastgeber: {
        '(click)': 'onClick($event)'
    }
})
Exportklasse AppElementComponent {
  public onClick($event) {
    console.log($event);
  }
}

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

4. encapsulation (encapsulation)

Stilkapselungsstrategie für Vorlagen und CSS-Stile.

4.1 Webkomponenten

kapseln eine Komponente auf standardisierte und nicht aufdringliche Weise. Jede Komponente kann ihre eigene HTML-Struktur, ihren eigenen CSS-Stil und ihren eigenen JavaScript-Code organisieren, ohne andere Elemente auf der Seite不会干扰.

Web Components besteht aus den folgenden vier Technologien:

• Benutzerdefinierte Elemente: Benutzerdefiniertes Element HTML-
• Vorlagen: HTML-Vorlage
• Shadow DOM: Shadow DOMHTML-
• Importe: HTML-Import

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>Shadow DOM</title>
    <style type="text/css">
        .shadowroot_son {
            Farbe: #f00;
        }
    </style>
</head>
<Körper>
<p>Ich bin nicht in Shadow Host</p>
<div>Hallo Welt!</div>
<Skript>
 // Schattenhost
 varshadowHost = document.querySelector('.shadowhost');
 // Schattenwurzel erstellen (Schattenwurzel)
 varshadowRoot =shadowHost.createShadowRoot();
 // Die Schattenwurzel ist der erste Knoten des Schattenbaums, und andere Knoten wie der p-Knoten sind seine untergeordneten Knoten.
 shadowRoot.innerHTML = '<p>Ich bin im Shadow Host</p>';
</script>
</body>
<html>

4.3 ViewEncapsulation

ViewEncapsulation ermöglicht das Festlegen von drei optionalen Werten:

• ViewEncapsulation.Emulated: Kein Shadow-DOM, aber die Komponente wird durch den von Angular bereitgestellten Stilverpackungsmechanismus gekapselt, sodass der Stil der Komponente nicht durch äußere Einflüsse beeinflusst wird. Dies ist die Standardeinstellung von Angular.
• ViewEncapsulation.ShadowDom: Verwenden Sie die native Shadow-DOM-Funktion.
• ViewEncapsulation.None: Kein Shadow-DOM und keine Stilpaketierung.

4.3.1 ViewEncapsulation.None

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

@Komponente({
  Selektor: 'meine-App',
  Vorlage: `
    <h4>Willkommen bei Angular World</h4>
    <p class="greet">Hallo {{name}}</p>
  `,
  Stile: [`
    .greet {
      Hintergrund: #369;
      Farbe: weiß;
    }
  `],
  Kapselung: ViewEncapsulation.None // None |
})
Exportklasse AppComponent {
  Name: string = 'Semlinker';
}

Das Ergebnis der Einstellung „ ViewEncapsulation.None ist, dass kein Shadow DOM vorhanden ist und alle Stile auf整个document angewendet werden. Mit anderen Worten: Der Stil der Komponente wird受外界影响und kann覆盖werden.

4.3.2 ViewEncapsulation.Emulated

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

@Komponente({
  Selektor: 'meine-App',
  ...,
  Kapselung: ViewEncapsulation.Emulated // None |
})
Exportklasse AppComponent {
  Name: string = 'Semlinker';
}

Das Ergebnis der Einstellung „ ViewEncapsulation.Emulated ist, dass kein Shadow DOM vorhanden ist, die Komponente jedoch durch den von Angular bereitgestellten样式包装机制gekapselt wird, sodass der Stil der Komponente不受外部影响. Obwohl der Stil weiterhin auf整个document angewendet wird, erstellt Angular einen [_ngcontent-cmy-0] -Selektor für die .greet Klasse. Es ist ersichtlich, dass为组件定义的样式，被Angular 修改了. Unter diesen werden _nghost-cmy- 和_ngcontent-cmy- zur实现局部的样式verwendet.

4.3.3 ViewEncapsulation.ShadowDom

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

@Komponente({
  Selektor: 'meine-App',
  ...,
  Kapselung: ViewEncapsulation.ShadowDom // Keine | Emuliert |
})
Exportklasse AppComponent {
  Name: string = 'Semlinker';
}

Das Ergebnis der ViewEncapsulation.ShadowDom -Einstellung ist die Verwendung der nativen Shadow DOM Funktion. Angular Shadow DOM 形式渲染.