Maison >interface Web >js tutoriel >Une analyse approfondie des décorateurs de classe dans Angular

Une analyse approfondie des décorateurs de classe dans Angular

青灯夜游avant: 2021-11-11 10:13:121977parcourir

本篇文章带大家了解一下Angular中的5种类（class）装饰器，希望对大家有所帮助！

angular共有5种类装饰器，表明每个类的用途，angular用何种方式解析它。

NgModule: 标明是一个模块
Component：标明是一个组件
Directive：标明是一个指令
Injectable：标明是一个服务
Pipe：标明是一个管道

1. `NgModule`

把一个类标记为模块，并可以在这个类中配置这个模块中用到的数据。【相关教程推荐：《angular教程》】

它支持做如下配置：(下同)

1.1 imports

导入本模块需要用到的模块，注意懒加载的模块不能导入，否则懒加载就没有作用了。

1.2. declarations: Array8cdcaf1eb092ddf0e71187b21b558ea9

声明组件、指令、管道，这三个统称为可申明对象。

1.3. providers: []

注册服务

1.4 exports: Array8cdcaf1eb092ddf0e71187b21b558ea9

其他模块若想使用本模块的组件、指令或管道，则需要将其抛出去。

为啥要抛出去？angular规定可声明对象应该且只能属于一个 NgModule。

1.5 entryComponents: []

告诉 Angular 哪些是动态组件，Angular 都会为其创建一个 ComponentFactory，并将其保存到 ComponentFactoryResolver 中。

若要写一个动态组件不仅要在这里加，还需要在declarations中申明。

1.6 bootstrap：Array8cdcaf1eb092ddf0e71187b21b558ea9

当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。

1.7 schemas: Array6442314f0169a8ba2468517ae5d33400

该 NgModule 中允许使用的声明元素的 schema（HTML 架构）。元素和属性（无论是 Angular 组件还是指令）都必须声明在 schema 中。

1.8 id: string

当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。如果为 undefined，则该模块不会被注册进 getModuleFactory 中。

1.9 jit: true

如果为 true，则该模块将会被 AOT 编译器忽略，因此始终会使用 JIT 编译。

2. Component

一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。组件是特殊的指令，它的一部分属性继承自 Directive 装饰器。

2.1 selector: string

css选择器名称, 可以是标签名、属性、class等，一般都是以标签来命名，具体见指令选择器部分。

如selector: 'mo-dir'在html中使用为 88119e2bf5e7fdd9daed54514cbfd87606404762ae6c64591e08ae30689a7f0d
也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为 2b5cf4925f5177952a6516211a36db4d16b28748ea4df4d9c2150843fecfba68

2.2 template： string、templateUrl：string

这两个同时只能用1个

template 是直接写的html字符串，如dc6dce4a544fdca2df29d5ac0ea9906b我是html内容16b28748ea4df4d9c2150843fecfba68
templateUrl est l'adresse du chemin du fichier HTML

2.3 styles, styleUrls

styles est le style CSS écrit directement
styleUrls est l'adresse du chemin du fichier CSS

2.4 animations

Un ou plus d'appel Animation trigger(), contenant quelques définitions state() et transition().

2.5 fournisseurs

Les services peuvent être enregistrés ici et utilisés

2.6 changeDetection

Spécifiez la stratégie de détection des changements du composant actuel.

2.7 entrées : string[]

paramètres transmis par le composant, équivalent à @Input<code>@Input。和@Input不同的是它是一个数组。

@Component({
  selector: &#39;mo-dir&#39;,
  inputs: [id: 123],
  template: `
   {{ id }}
  `
})
class BankAccount {
  id: number;
}

inputs中的内容表示有个id属性，默认值是123。相当于@Input id: number = 123。

2.8 outputs：string[]

事件输出，相当于@Output，和@Output不同的是它是一个数组。

@Component({
  selector: &#39;mo-dir&#39;,
  outputs: [ &#39;idChange&#39; ]
})
class ChildDir {
 idChange: EventEmitter<string> = new EventEmitter<string>();
}

相当于@output idChange: EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e();。

3. Directive

3.1 selector： string

它是一个css选择器，用于在模板中标记出该指令，并触发该指令的实例化。可使用下列形式之一

元素名或标签名

@Directive({
  selector: &#39;mo&#39;,
})

<mo></mo>

class

@Directive({
  selector: &#39;.mo&#39;,
})

<div class=".mo"></div>

属性名

@Directive({
  selector: &#39;[mo]&#39;,
})

<div mo></div>

属性名=属性值

@Directive({
  selector: &#39;[type=text]&#39;,
})

<input type="text"></div>

不包含某个选择器

比如匹配有属性mo但是不包含class.foo

@Directive({
  selector: &#39;div[mo]:not(.foo)&#39;,
})



<div mo></div>

上述指令第一个不会被匹配到，第二个会被匹配到。

匹配多个中的一个即可

可以同时写多个，如果匹配到其中一个即可，使用逗号隔开。

@Directive({
  selector: &#39;.foo, .bar&#39;,
})

<div class="foo"></div>
<div class="bar></div>
<div class="foo bar"></div>

上述三个均会被添加上指令。

3.2 inputs、outputs: string[]

同组件

3.3 providers

将服务注入进来使用

3.4 exportAs: string

Take Advantage of the exportAs Property in Angular：

https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26

把指令以一个变量抛出去，供外部使用。

比如写了一个指令来修改文本颜色

@Directive({
 selector: &#39;[changeColor]&#39;,
 exportAs: &#39;changeColor&#39;
})
class ChangeColorDirective {
    
    toggleColor() {
        // 修改颜色的逻辑
    }
}

<p changeColor #changeColorRef="changeColor"></p>

<button (click)="changeColorRef.toggleColor()"></button>

指令通过属性[changeColor]获取到了p元素，之后通过exportAs把指令以changeColor变量抛了出去, 在html模板中以#changeColorRef. La différence avec @Input

est qu'il s'agit d'un tableau. Le contenu de

@Injectable({
  providedIn: &#39;root&#39;,
})

inputs indique qu'il existe un attribut id et la valeur par défaut est 123. Équivalent à @Input id : nombre = 123.

2.8 sorties : string[]

sortie d'événement, équivalente à @Output

@Output<li> est qu'il s'agit d'un tableau . </li><pre class="brush:js;toolbar:false;">import { Pipe, PipeTransform } from &amp;#39;@angular/core&amp;#39;;

@Pipe({
  name: &amp;#39;mo&amp;#39;,
})
export class MoPipe implements PipeTransform {
  transform(name: string, id: number): any {
    // 对传进来的数组进行处理，再return出去
  }
}</pre><li> est équivalent à <code>@output idChange : EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e();

3. Directive

3.1 sélecteur : string

C'est un sélecteur CSS, utilisé dans les modèles Marquez le directive dans et déclencher l’instanciation de la directive. Vous pouvez utiliser l'un des formulaires suivants

Nom de l'élément ou nom de la balise

@Component({
  selector: &#39;mo-dir&#39;,
  template: `
    <p>   {{ name | mo: id }} </span>
  `
})
class BankAccount {
    name: string = "deepthan"
    id:   number = 1;
}

rrreee

class
rrreeerrreee

Nom de l'attribut

rrreeerrreee

Nom de l'attribut = valeur de l'attribut

rrreeerrre ee

Ne contient pas de sélection Appareil

Par exemple, si l'attribut mo

correspond mais n'inclut pas class

.foo<h4 data-id="heading-28">
<strong>rrreeerrreee</strong>La première des instructions ci-dessus ne correspondra pas, mais la seconde le sera. </h4>
<ul>
<li>Faites correspondre l'un des multiples</li>
<li>Vous pouvez en écrire plusieurs en même temps. S'il correspond à l'un d'entre eux, utilisez des virgules pour les séparer. </ul>rrreeerrreee<p>Des commandes seront ajoutées aux trois ci-dessus. </p>
<h4 data-id="heading-21"></h4>
<p>3.2 entrées, sorties : string[]</p>
<blockquote>
<p>Même composant</p>
<h4 data-id="heading-22"></h4>
<p>3.3 fournisseurs</p>
</blockquote>
<p>Injecter les services utilisés <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频"><h4 data-id="heading-23"></h4></a>3.4 exportAs : string</p>🎜🎜🎜Profitez de la propriété exportAs dans Angular : 🎜🎜https://netbasal.com/angular-2-take-advantage- of -the-exportas-property-81374ce24d26🎜🎜🎜 Lance l'instruction dans une variable pour un usage externe. 🎜🎜Par exemple, si vous écrivez une instruction pour modifier la couleur du texte🎜rrreeerrreee🎜l'instruction obtient l'élément p via l'attribut <code>[changeColor]🎜, puis lance l'instruction en tant que variable <code>changeColor🎜 via exportAs🎜, in Le modèle html utilise <code>#changeColorRef🎜 pour recevoir l'instance d'instruction À ce stade, le contenu de cette instruction peut être utilisé. 🎜🎜🎜3.5 requêtes, host, jit🎜🎜🎜Le site officiel l'explique très clairement : 🎜🎜🎜queries : https://angular.cn/api/core/Directive#queries🎜🎜host : https://angular. cn/ api/core/Directive#host🎜🎜jit：https://angular.cn/api/core/Directive#jit🎜🎜🎜🎜4. Injectable🎜🎜🎜🎜Injectable：🎜🎜https://angular.cn /api /core/Injectable🎜🎜rrreee🎜🎜'root' : injecteur au niveau de l'application dans la plupart des applications. 🎜🎜 'plateforme' : Injecteur de plateforme singleton spécial partagé par toutes les applications de la page. 🎜🎜'any' : fournissez une instance unique dans chaque module (y compris les modules paresseux) qui injecte le jeton. 🎜🎜🎜🎜5. pipe🎜🎜🎜La fonction du tube est la conversion de données. 🎜🎜🎜5.1 name: string🎜🎜🎜pipeline name🎜🎜🎜5.2 pure: boolean🎜🎜🎜🎜true: pipeline pur, la méthode de transformation ne sera appelée que lorsque le paramètre d'entrée change🎜🎜false: le pipeline sera appelé tous les time Il est appelé une fois pendant le cycle de détection de changement - même si ses paramètres n'ont pas changé. 🎜🎜🎜Personnalisez un pipeline : 🎜🎜Transmettez le nom et l'identifiant dans le pipeline pour le traitement🎜rrreeerrreee🎜🎜Plus de mises à jour d'utilisation sur github :🎜🎜https://github.com/deepthan/blog-angular🎜🎜🎜Plus Pour en savoir plus connaissances liées à la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Résumer et partager quelques questions d'entretien front-end basées sur Node.js (avec analyse)Article suivant：Résumer et partager quelques questions d'entretien front-end basées sur Node.js (avec analyse)

Articles Liés

Voir plus

Une analyse approfondie des décorateurs de classe dans Angular

1. NgModule

1.1 imports

1.2. declarations: Array8cdcaf1eb092ddf0e71187b21b558ea9

1.3. providers: []

1.4 exports: Array8cdcaf1eb092ddf0e71187b21b558ea9

1.5 entryComponents: []

1.6 bootstrap：Array8cdcaf1eb092ddf0e71187b21b558ea9

1.7 schemas: Array6442314f0169a8ba2468517ae5d33400

1.8 id: string

1.9 jit: true

2. Component

2.1 selector: string

2.2 template： string、templateUrl：string

2.3 styles, styleUrls

2.4 animations

2.5 fournisseurs

2.6 changeDetection

2.7 entrées : string[]

2.8 outputs：string[]

3. Directive

3.1 selector： string

3.2 inputs、outputs: string[]

3.3 providers

3.4 exportAs: string

@Injectable({ providedIn: &#39;root&#39;, })inputs indique qu'il existe un attribut id et la valeur par défaut est 123. Équivalent à @Input id : nombre = 123.

3. Directive

rrreeerrreee

Ne contient pas de sélection Appareil

Articles Liés

1. `NgModule`

@Injectable({ providedIn: 'root', })
inputs indique qu'il existe un attribut id et la valeur par défaut est 123. Équivalent à `@Input id : nombre = 123`.