Une analyse approfondie des décorateurs de classe dans Angular
本篇文章带大家了解一下Angular中的5种类(class)装饰器,希望对大家有所帮助!
angular共有5种类装饰器,表明每个类的用途,angular用何种方式解析它。
-
NgModule
: 标明是一个模块 -
Component
:标明是一个组件 -
Directive
: 标明是一个指令 -
Injectable
: 标明是一个服务 -
Pipe
: 标明是一个管道
1. NgModule
把一个类标记为模块,并可以在这个类中配置这个模块中用到的数据。【相关教程推荐:《angular教程》】
它支持做如下配置:(下同)
1.1 imports
导入本模块需要用到的模块,注意懒加载的模块不能导入,否则懒加载就没有作用了。
1.2. declarations: Array
声明组件、指令、管道,这三个统称为可申明对象。
1.3. providers: []
注册服务
1.4 exports: Array
其他模块若想使用本模块的组件、指令或管道,则需要将其抛出去。
为啥要抛出去?angular规定可声明对象应该且只能属于一个 NgModule。
1.5 entryComponents: []
告诉 Angular 哪些是动态组件,Angular 都会为其创建一个 ComponentFactory,并将其保存到 ComponentFactoryResolver 中。
若要写一个动态组件不仅要在这里加,还需要在declarations
中申明。
1.6 bootstrap:Array
当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。
1.7 schemas: Array
该 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中使用为 <mo-dir></mo-dir>
也可以使用属性来定义, 如selector: '[mo-dir]'
在html中使用为 <div mo-dir></div>
2.2 template: string、templateUrl:string
这两个同时只能用1个
- template 是直接写的html字符串,如
<div>我是html内容</div>
- 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: 'mo-dir', inputs: [id: 123], template: ` {{ id }} ` }) class BankAccount { id: number; }
inputs中的内容表示有个id属性,默认值是123。相当于@Input id: number = 123
。
2.8 outputs:string[]
事件输出,相当于@Output
,和@Output
不同的是它是一个数组。
@Component({ selector: 'mo-dir', outputs: [ 'idChange' ] }) class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>(); }
相当于@output idChange: EventEmitter<string> = new EventEmitter<string>();
。
3. Directive
3.1 selector: string
它是一个css选择器, 用于在模板中标记出该指令,并触发该指令的实例化。可使用下列形式之一
- 元素名或标签名
@Directive({ selector: 'mo', })
<mo></mo>
- class
@Directive({ selector: '.mo', })
<div class=".mo"></div>
- 属性名
@Directive({ selector: '[mo]', })
<div mo></div>
- 属性名=属性值
@Directive({ selector: '[type=text]', })
<input type="text"></div>
- 不包含某个选择器
比如匹配有属性mo
但是不包含class.foo
@Directive({ selector: 'div[mo]:not(.foo)', })
<div mo></div>
上述指令第一个不会被匹配到,第二个会被匹配到。
- 匹配多个中的一个即可
可以同时写多个,如果匹配到其中一个即可,使用逗号隔开。
@Directive({ selector: '.foo, .bar', })
<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: '[changeColor]', exportAs: 'changeColor' }) class ChangeColorDirective { toggleColor() { // 修改颜色的逻辑 } }
<p changeColor #changeColorRef="changeColor"></p> <button (click)="changeColorRef.toggleColor()"></button>
指令通过属性[changeColor]
获取到了p元素,之后通过exportAs
把指令以changeColor
变量抛了出去, 在html模板中以#changeColorRef
. La différence avec @Input</p> est qu'il s'agit d'un tableau. Le contenu de <h4 data-id="heading-24"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@Injectable({
providedIn: &#39;root&#39;,
})</pre><div class="contentsignin">Copier après la connexion</div></div><strong>inputs indique qu'il existe un attribut id et la valeur par défaut est 123. Équivalent à <code>@Input id : nombre = 123</strong>. </h4><h4 data-id="heading-18"><p>2.8 sorties : string[]</p><ul><li> sortie d'événement, équivalente à <code>@Output</li>, la différence avec <code>@Output<li> est qu'il s'agit d'un tableau . </li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { Pipe, PipeTransform } from &#39;@angular/core&#39;;
@Pipe({
name: &#39;mo&#39;,
})
export class MoPipe implements PipeTransform {
transform(name: string, id: number): any {
// 对传进来的数组进行处理,再return出去
}
}</pre><div class="contentsignin">Copier après la connexion</div></div><li> est équivalent à <code>@output idChange : EventEmitter<string> = new EventEmitter<string>();</li>. </ul><h2 id="h-data-id-heading-Directive-strong-strong-h-data-id-heading"><h2 data-id="heading-25">3. Directive<strong></strong><h4 data-id="heading-20"></h2>3.1 sélecteur : string<blockquote><p></p>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<p></p></blockquote>Nom de l'élément ou nom de la balise<ul><li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@Component({
selector: &#39;mo-dir&#39;,
template: `
<p> {{ name | mo: id }} </span>
`
})
class BankAccount {
name: string = "deepthan"
id: number = 1;
}</pre><div class="contentsignin">Copier après la connexion</div></div>rrreee<li>class</li>
<li>rrreeerrreee</li>Nom de l'attribut<h2 id="strong-rrreeerrreee-strong"><strong>rrreeerrreee</strong></h2>Nom de l'attribut = valeur de l'attribut<p></p>rrreeerrre ee<h4 id="strong-Ne-contient-pas-de-sélection-Appareil-strong"><strong>Ne contient pas de sélection Appareil </strong></h4> <p>Par exemple, si l'attribut <code>mo
.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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Cet article poursuit l'apprentissage d'Angular, vous amène à comprendre les métadonnées et les décorateurs dans Angular, et comprend brièvement leur utilisation. J'espère qu'il sera utile à tout le monde !

Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub

Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !

Comment utiliser monaco-editor en angulaire ? L'article suivant enregistre l'utilisation de monaco-editor dans angulaire qui a été utilisé dans une entreprise récente. J'espère qu'il sera utile à tout le monde !

Connaissez-vous Angular Universel ? Cela peut aider le site Web à fournir un meilleur support SEO !

Cet article partagera avec vous une expérience pratique d'Angular et apprendra comment développer rapidement un système backend en utilisant Angualr combiné avec ng-zorro. J'espère que cela sera utile à tout le monde !

Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !

Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !
