Tiefes Verständnis des @Component-Dekorators in Angular

Component ist eine Unterklasse von Directive. Es handelt sich um einen Dekorator, der verwendet wird, um eine Klasse als Angular-Komponente zu kennzeichnen. Der folgende Artikel vermittelt Ihnen ein detailliertes Verständnis des @Component-Dekorators in Angular. Ich hoffe, er wird Ihnen hilfreich sein.

1. @Component Decorator@Component 装饰器

1.1 <span style="font-size: 18px;">@Component</span> 装饰器的用途

声明一个组件时，在组件类的之上要用@Component装饰器来告知Angular这是一个组件。【相关教程推荐：《angular教程》】

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 <span style="font-size: 18px;">@Component</span> 装饰器的常用选项

@Component 装饰器继承于 Directive ，这个css选择器用于在模板中标记出该指令，并触发该指令的实例化。

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

1.1 <span style = "font-size: 18px;">@Component</span> Zweck des DekoratorsBei der Deklaration einer Komponente wird die @Component Für die Komponentenklasse muss ein Decorator verwendet werden, um Angular mitzuteilen, dass es sich um eine Komponente handelt. [Verwandte Tutorial-Empfehlungen: „“]@Component Der Dekorator erbt von Direktive, dieser CSS-Selektor wird verwendet, um die Direktive in der Vorlage zu markieren und die Instanziierung der Direktive auszulösen. + Selektorname, wird verwendet, um die Direktive (Komponente) in der Vorlage zu markieren und ihre Instanziierung auszulöseninputsstring[]Angular aktualisiert die Eingabeeigenschaften automatisch während der Änderungserkennung. Das Eingabeattribut definiert eine Reihe von Konfigurationselementen, die von DirectiveProperty auf BindingProperty verweisen: · DirectiveProperty wird verwendet, um die Eigenschaften innerhalb der Direktive anzugeben, in die Werte geschrieben werden sollen. · bindingProperty wird verwendet, um die DOM-Eigenschaft anzugeben, aus der der Wert gelesen werden soll. Wenn bindingProperty nicht angegeben wird, wird davon ausgegangen, dass es mit DirectiveProperty identisch ist. outputsEine Reihe von Ausgabeeigenschaften für die Ereignisbindung. Wenn eine Ausgabeeigenschaft ein Ereignis ausgibt, wird ein Handler in der dem Ereignis zugeordneten Vorlage aufgerufen. Jede Ausgabeeigenschaft ordnet „directiveProperty“ der „bindingProperty“ zu: · „directiveProperty“ gibt die Komponenteneigenschaft zum Ausgeben des Ereignisses an. · bindingProperty gibt die HTML-Eigenschaft an, an die der Event-Handler angehängt werden soll. providesEine Sammlung von Dienstanbietern exportAsstringEin oder mehrere Namen, die verwendet werden können, um diese Direktive einer Variablen in der Vorlage zuzuweisen. Wenn es mehrere Namen gibt, trennen Sie diese durch Kommas. Abfragen{[key:string]:any}Konfigurieren Sie einige Abfragen, die in diese Direktive eingefügt werden. Die Inhaltsabfrage wird vor dem Aufruf des ngAfterContentInit-Rückrufs festgelegt. Die Ansichtsabfrage wird vor dem Aufruf des ngAfterViewInit-Rückrufs festgelegt. jittrueWenn true, wird die Direktive/Komponente vom AOT-Compiler ignoriert und daher nur JIT-kompiliert. Diese Option dient der Unterstützung zukünftiger Ivy-Compiler und hat noch keine Auswirkung. host{[key:string]:string}Ordnen Sie mithilfe einer Reihe von Schlüssel-Wert-Paaren die Eigenschaften der Klasse den Bindungen des Host-Elements (Eigenschaft, Attribut und Ereignis) zu. Angular überprüft automatisch die Host-Eigenschaftsbindungen während der Änderungserkennung. Wenn sich der gebundene Wert ändert, aktualisiert Angular das Hostelement der Direktive. Wenn key 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. Für die Ereignisverarbeitung: · Sein Schlüssel ist das DOM-Ereignis, das die Anweisung abhören 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.

1.2.2 @Component自己特有的选项

Angular Tutorial	@Component({ selector: &#39;app-element&#39;, template: &#39;./element.component.html&#39;, styleUrls: [&#39;./element.component.css&#39;] })	1.2 <span style="font-size: 18px;"> @Component</span> Allgemeine Optionen für Dekoratoren
		string[]
		Provider[]

Optionen	Typ	Beschreibung
changeDetection	ChangeDetectionStrategy	Nachdem die Komponente instanziiert wurde Angular erstellt einen Änderungsdetektor, der für die Weitergabe von Komponentenänderungen verantwortlich ist in individuellen verbindlichen Werten. Die Strategie ist einer der folgenden Werte: · ChangeDetectionStrategy#OnPush(0) Setzt die Strategie auf CheckOnce (auf Anfrage). · ChangeDetectionStrategy#Default(1) Setzen Sie die Strategie auf CheckAlways.
viewProviders	Provider[]	Definiert einen Satz injizierbarer Objekte, die in verschiedenen untergeordneten Knoten der Ansicht verfügbar sind.
moduleId	string	Die ID des Moduls, das diese Komponente enthält. Die Komponente muss in der Lage sein, relative URLs aufzulösen, die in Vorlagen und Stylesheets verwendet werden. SystemJS exportiert die Variable __moduleName in jedes Modul. In CommonJS kann dies auf module.id gesetzt werden.
templateUrl	string	Die URL der Komponentenvorlagendatei. Wenn es bereitgestellt wird, verwenden Sie template nicht, um Inline-Vorlagen bereitzustellen.
template	string	Inline-Vorlage für Komponenten. Wenn es bereitgestellt wird, verwenden Sie templateUrl nicht, um die Vorlage bereitzustellen.
styleUrls	string[]	Eine oder mehrere URLs, die auf die Datei verweisen, die das CSS-Stylesheet dieser Komponente enthält.
styles	string[]	Ein oder mehrere Inline-CSS-Stile, die von dieser Komponente verwendet werden.
Animationen	any[]	Ein oder mehrere Animations-Trigger()-Aufrufe, einschließlich einiger State()- und Transition()-Definitionen.
encapsulation	ViewEncapsulation	Style-Kapselungsstrategie für Vorlagen und CSS-Stile. Werte sind: · ViewEncapsulation.ShadowDom: Shadow DOM verwenden. Es funktioniert nur auf Plattformen, die Shadow DOM nativ unterstützen. · ViewEncapsulation.Emulated: Verwenden Sie angepasstes CSS, um natives Verhalten zu emulieren. · ViewEncapsulation.None: Globales CSS ohne Kapselung verwenden. Wenn nicht angegeben, wird der Wert von CompilerOptions bezogen. Die Standard-Compileroption ist ViewEncapsulation.Emulated. Wenn die Richtlinie auf ViewEncapsulation.Emulated festgelegt ist und die Komponente keine Stile oder styleUrls angibt, wechselt sie automatisch zu ViewEncapsulation.None.
Interpolation	[Zeichenfolge, Zeichenfolge]	Überschreiben Sie die standardmäßigen Start- und Endtrennzeichen des Interpolationsausdrucks ({{ und }})
entryComponents	Array	any[]>
preserveWhitespaces	boolean	Wenn true, wird es beibehalten, wenn false, werden mögliche zusätzliche Leerzeichen aus der kompilierten Vorlage entfernt. Leerzeichen sind die Zeichen, die mit s in regulären JavaScript-Ausdrücken übereinstimmen. Der Standardwert ist „false“, sofern er nicht über Compiler-Optionen überschrieben wird.

二、 selector 选择器

可使用下列形式之一：

• element-name： 根据元素名选取
• [attribute]： 根据属性名选取
• .class： 根据类名选取
• [attribute=value]： 根据属性名和属性值选取
• not(sub_selector)： 只有当元素不匹配子选择器 sub_selector 的时候才选取
• selector1, selector2： 无论 selector1 还是 selector2 匹配时都选取

2.1 <span style="font-size: 18px;">element-name</span>： 根据元素名选取

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

<app-element></app-element>

2.2 <span style="font-size: 18px;">[attribute]</span>： 根据属性名选取

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

<div app-element></div>

2.3 <span style="font-size: 18px;">.class</span>： 根据类名选取

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

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

三、 host: {[key:string]:string}

使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。
Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。

• 当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。
• 当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。
• 注意属性的值默认为变量，如果直接使用属性值，需要加字符串单引号或者双引号，变量直接在组件里定义即可

对于事件处理：

• 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。
• 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。

3.1 <span style="font-size: 18px;">attribute</span> 和 <span style="font-size: 18px;">property</span>

• property：dom元素作为对象附加的内容，例如childNodes、firstChild等
• attribute：HTML标签特性是dom节点自带的属性

异同：

• 部分属性既属于 property ，又属于 attribute ，比如 id
• attribute 初始化后不会再改变； property 默认值为初始值，会随着 dom 更新

所以在 angular2 中双向绑定实现是由 dom 的 property 实现的，所以指令绑定的是 property ，但是在某些情况下 dom 不存在某个 property 比如 colspan，rowspan 等，这时想要绑定 html 标签特性需要用到 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 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">class</span>

@Component({
    selector: '.app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css'],
    host: {
        '[class.default-class]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // 让宿主元素也用上 element.component.css 样式。否则，默认胶囊封装避免CSS污染。
})
export class AppElementComponent {
  @Input() useDefault = true;
}

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

3.3 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">style</span>

@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 使用 <span style="font-size: 18px;">host</span> 绑定事件

@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>

四、 encapsulation（封装）

供模板和 CSS 样式使用的样式封装策略。

4.1 Web Components

通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，并且不会干扰页面上的其他元素。

Web Components 由以下四种技术组成：

• Custom Elements: 自定义元素HTML
• Templates: HTML模板
• Shadow DOM: 影子DOMHTML
• Imports: HTML导入

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>我不在 Shadow Host内</p>
<div>Hello, world!</div>
<script>
 // 影子宿主（shadow host）
 var shadowHost = document.querySelector(&#39;.shadowhost&#39;);
 // 创建影子根（shadow root）
 var shadowRoot = shadowHost.createShadowRoot();
 // 影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
 shadowRoot.innerHTML = &#39;<p>我在 Shadow Host内</p>&#39;;
</script>
</body>
<html>

4.3 <span style="font-size: 18px;">ViewEncapsulation</span>

ViewEncapsulation 允许设置三个可选的值：

• ViewEncapsulation.Emulated: 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是 Angular 的默认设置。
• ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
• ViewEncapsulation.None: 无 Shadow DOM，并且也无样式包装

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 = &#39;Semlinker&#39;;
}

ViewEncapsulation.None 设置的结果是没有 Shadow DOM，并且所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉。

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';
}

ViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为 .greet 类创建了一个 [_ngcontent-cmy-0] 选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用来实现局部的样式。

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';
}

ViewEncapsulation.ShadowDom 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonTiefes Verständnis des @Component-Dekorators in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!