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

Component est une sous-classe de Directive. C'est un décorateur utilisé pour marquer une classe comme un composant Angular. L'article suivant vous donnera une compréhension approfondie du décorateur @Component en angulaire. J'espère qu'il vous sera utile.

1. @Component Décorateur@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> Objectif du décorateurLors de la déclaration d'un composant, dans Le @ Le décorateur de composant doit être utilisé sur la classe de composant pour indiquer à Angular qu'il s'agit d'un composant. [Recommandations de didacticiel associées : ""]@Component Le décorateur 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. + nom du sélecteur, utilisé pour marquer la directive (composant) dans le modèle et déclencher son instanciationinputsstring[]Angular mettra automatiquement à jour les propriétés d'entrée lors de la détection des changements. L'attribut inputs définit un ensemble d'éléments de configuration pointant de directiveProperty vers BindingProperty : · directiveProperty est utilisé pour spécifier les propriétés de la directive dans lesquelles les valeurs doivent être écrites. · bindProperty est utilisé pour spécifier la propriété DOM à partir de laquelle la valeur doit être lue. Lorsque bindProperty n’est pas fourni, il est supposé être identique à directiveProperty. outputsUn ensemble de propriétés de sortie pour la liaison d'événements. Lorsqu'une propriété de sortie émet un événement, un gestionnaire dans le modèle attaché à l'événement est appelé. Chaque propriété de sortie mappe directiveProperty à BindingProperty : · directiveProperty spécifie la propriété du composant qui émettra l'événement. · BindingProperty spécifie la propriété HTML à laquelle le gestionnaire d'événements doit être attaché. providesUne collection de fournisseurs de services exportAsstringUn ou plusieurs noms pouvant être utilisés pour attribuer cette directive à une variable du modèle. Lorsqu'il y a plusieurs noms, séparez-les par des virgules. queries{[key:string]:any}Configurez certaines requêtes qui seront injectées dans cette directive. La requête de contenu est définie avant d'appeler le rappel ngAfterContentInit. La requête de vue sera définie avant d'appeler le rappel ngAfterViewInit. jittrueSi vrai, la directive/composant sera ignoré par le compilateur AOT et sera donc uniquement compilé en JIT. Cette option est destinée à prendre en charge les futurs compilateurs Ivy et n'a pas encore d'effet. host{[key:string]:string}À l'aide d'un ensemble de paires clé-valeur, mappez les propriétés de la classe aux liaisons de l'élément hôte (propriété, attribut et événement). 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 key est une propriété de l'élément hôte, la valeur de la propriété est 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. Pour le traitement des événements : · Sa clé est l'événement DOM que l'instruction veut écouter. 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, alors 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.

1.2.2 @Component自己特有的选项

tutoriel angulaire	@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> Options communes pour les décorateurs
		string[]
		Provider[]

Options	Type	Description
changeDetection	ChangeDetectionStrategy	Lorsque le composant est instancié, Angular créera un détecteur de changement responsable de la propagation des changements dans les composants. dans des valeurs de liaison individuelles. La stratégie est l'une des valeurs suivantes : · ChangeDetectionStrategy#OnPush(0) Définit la stratégie sur CheckOnce (à la demande). · ChangeDetectionStrategy#Default(1) Définissez la stratégie sur CheckAlways.
viewProviders	Provider[]	Définit un ensemble d'objets injectables disponibles dans différents nœuds enfants de la vue
moduleId	string	L'ID du module qui contient ce composant. Le composant doit être capable de résoudre les URL relatives utilisées dans les modèles et les feuilles de style. SystemJS exporte la variable __moduleName dans chaque module. Dans CommonJS, cela peut être défini sur module.id.
templateUrl	string	L'URL du fichier de modèle de composant. S'il est fourni, n'utilisez pas de modèle pour fournir des modèles en ligne.
template	string	Modèle en ligne pour les composants. S'il est fourni, n'utilisez pas templateUrl pour fournir le modèle.
styleUrls	string[]	Une ou plusieurs URL pointant vers le fichier contenant la feuille de style CSS de ce composant.
styles	string[]	Un ou plusieurs styles CSS en ligne utilisés par ce composant.
animations	any[]	Un ou plusieurs appels de déclencheur d'animation(), y compris certaines définitions d'état() et de transition().
encapsulation	ViewEncapsulation	Stratégie d'encapsulation de styles pour les modèles et les styles CSS. Les valeurs sont : · ViewEncapsulation.ShadowDom : utilisez Shadow DOM. Il ne fonctionne que sur les plateformes prenant en charge nativement Shadow DOM. · ViewEncapsulation.Emulated : utilisez du CSS shimmé pour émuler le comportement natif. · ViewEncapsulation.None : utilisez le CSS global sans aucune encapsulation. Si elle n'est pas fournie, la valeur l'obtiendra de CompilerOptions. L'option par défaut du compilateur est ViewEncapsulation.Emulated. Si la stratégie est définie sur ViewEncapsulation.Emulated et que le composant ne spécifie pas de styles ou de styleUrls, il passe automatiquement à ViewEncapsulation.None.
interpolation	[string, string]	Remplace les délimiteurs de début et de fin de l'expression d'interpolation par défaut ({{ et }})
entryComponents	Array9eecf80e40e62541f9fe709ed995e8cd
preserveWhitespaces	boolean	Si vrai, il est conservé, si faux, les éventuels caractères d'espacement supplémentaires sont supprimés du modèle compilé. Les caractères d'espacement sont les caractères qui correspondent aux s dans les expressions régulières JavaScript. La valeur par défaut est false sauf si elle est remplacée via les options du compilateur.

二、 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 形式渲染。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!