Eine eingehende Analyse der Klassendekoratoren in Angular

本篇文章带大家了解一下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 ist die HTML-Dateipfadadresse

2.3-Stile, styleUrls

• styles ist der direkt geschriebene CSS-Stil
• styleUrls ist die CSS-Dateipfadadresse

2.4-Animationen.

Ein oder mehr Animationstrigger()-Aufruf, der einige state()- und transition()-Definitionen enthält.

2.5 Anbieter

Dienste können hier registriert und genutzt werden

2.6 changeDetection

Geben Sie die Änderungserkennungsstrategie der aktuellen Komponente an.

2.7 Eingaben: string[]

von der Komponente übergebene Parameter, äquivalent zu @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: EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e();。

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. Der Unterschied zu @Input

besteht darin, dass es sich um ein Array handelt. Der Inhalt in

@Injectable({
  providedIn: 'root',
})

inputs zeigt an, dass es ein ID-Attribut gibt und der Standardwert 123 ist. Entspricht @Eingabe-ID: Zahl = 123.

2.8 Ausgaben: string[]

• Ereignisausgabe, entspricht @Output
, der Unterschied zu @Output<li> besteht darin, dass es sich um ein Array handelt . </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> entspricht <code>@output idChange: EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e(); .

3. Direktive

3.1 Selektor: string

Es handelt sich um einen CSS-Selektor, der in Vorlagen verwendet wird. Markieren Sie die Direktive in und löst die Instanziierung der Direktive aus. Sie können eine der folgenden Formen verwenden

Elementname oder Tag-Name

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

  rrreee
• Klasse
• rrreeerrreee

Attributname

rrreeerrreee

Attributname = Attribut. Wert

rrree errreee

Enthält kein Auswahlgerät

Wenn beispielsweise das Attribut mo

übereinstimmt, aber class.foo nicht enthält<h4 data-id="heading-28"> <strong>rrreeerrreee</strong>Die erste der oben genannten Anweisungen wird nicht abgeglichen, die zweite jedoch. </h4> <ul> <li>Passen Sie einfach eine der mehreren an.</li> <li>Sie können mehrere gleichzeitig schreiben. Wenn eine davon übereinstimmt, trennen Sie sie durch Kommas. </ul>rrreeerrreee<p>Zu allen drei oben genannten werden Befehle hinzugefügt. </p> <h4 data-id="heading-21"></h4> <p>3.2 Eingaben, Ausgaben: string[]</p> <blockquote> <p>Gleiche Komponente</p> <h4 data-id="heading-22"></h4> <p>3.3 Anbieter</p> </blockquote> <p>Inject-Dienste im Einsatz <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频"><h4 data-id="heading-23"></h4></a>3.4 exportAs: string</p>🎜🎜🎜Nutzen Sie die exportAs-Eigenschaft in Angular: 🎜🎜https://netbasal.com/angular-2-take-advantage- of -the-exportas-property-81374ce24d26🎜🎜🎜 Wirft die Anweisung in eine Variable zur externen Verwendung ein. 🎜🎜Schreiben Sie beispielsweise eine Anweisung zum Ändern der Textfarbe🎜rrreeerrreee🎜Die Anweisung erhält das p-Element über das Attribut <code>[changeColor]🎜 und gibt die Anweisung dann über <code> als Variable <code>changeColor🎜 aus exportAs🎜, in Die HTML-Vorlage verwendet <code>#changeColorRef🎜, um die Anweisungsinstanz zu empfangen. Zu diesem Zeitpunkt kann der Inhalt dieser Anweisung verwendet werden. 🎜🎜🎜3.5 Abfragen, Host, JIT🎜🎜🎜Die offizielle Website erklärt es sehr deutlich: 🎜🎜🎜Abfragen: 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': Injektor auf Anwendungsebene in den meisten Anwendungen. 🎜🎜 'Plattform': Spezieller Singleton-Plattform-Injektor, der von allen Anwendungen auf der Seite gemeinsam genutzt wird. 🎜🎜'any': Stellen Sie in jedem Modul (einschließlich Lazy-Modulen) eine eindeutige Instanz bereit, die das Token einfügt. 🎜🎜🎜🎜5. Pipe🎜🎜🎜Die Funktion der Pipe ist die Datenkonvertierung. 5.1 Name: Zeichenfolge time Es wird einmal während des Änderungserkennungszyklus aufgerufen – auch wenn sich seine Parameter nicht geändert haben. 🎜🎜🎜Passen Sie eine Pipeline an: 🎜🎜Übergeben Sie den Namen und die ID zur Verarbeitung an die Pipeline🎜rrreeerrreee🎜🎜Weitere Nutzungsaktualisierungen auf Github:🎜🎜https://github.com/deepthan/blog-angular🎜🎜🎜Mehr Für mehr Programmierkenntnisse finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der Klassendekoratoren in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!