ホームページ  >  記事  >  ウェブフロントエンド  >  Angular のクラス デコレータの詳細な分析

Angular のクラス デコレータの詳細な分析

青灯夜游
青灯夜游転載
2021-11-11 10:13:121915ブラウズ

本篇文章带大家了解一下Angular中的5种类(class)装饰器,希望对大家有所帮助!

Angular のクラス デコレータの詳細な分析

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 は HTML ファイルのパス アドレスです

2.3 スタイル、styleUrls

  • styles は直接記述された CSS Style
  • styleUrls は CSS ファイル パス アドレスです

2.4 アニメーション

1 つ以上のアニメーション Trigger() 呼び出し (一部の状態を含む) ) とtransition() の定義。

2.5 プロバイダー

サービスはここに登録して使用できます

2.6 changeDetection

変更を指定します現在のコンポーネントの検出戦略。

2.7 入力: string[]

コンポーネントによって渡されるパラメーターは、@Input と同等です。 @Input との違いは、配列であることです。

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

入力の内容は、id 属性があることを示しており、デフォルト値は 123 です。 @入力 ID: 数値 = 123 と同等。

2.8 出力: string[]

イベント出力、@Output と同等、@Output とは異なります。配列。

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

は、@output idChange: EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e(); と同等です。

3. ディレクティブ

##3.1 セレクター: string

テンプレート内でマークするために使用される CSS セレクターです命令を終了し、命令のインスタンス化をトリガーします。次のいずれかの形式を使用できます。

    要素名またはタグ名
  • @Directive({
      selector: &#39;mo&#39;,
    })
    <mo></mo>
    class
  • @Directive({
      selector: &#39;.mo&#39;,
    })
    <div class=".mo"></div>
    Attribute name
  • @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>

は含まれません。上記の命令の最初の命令は一致しませんが、2 番目の命令は一致します。

    複数あるうちの 1 つと一致するだけです。
複数同時に記述できます。いずれか 1 つが一致する場合は、カンマで区切ってください。

@Directive({
  selector: &#39;.foo, .bar&#39;,
})
<div class="foo"></div>
<div class="bar></div>
<div class="foo bar"></div>

上記の3つの命令が追加されます。

3.2 入力、出力: string[]

同じコンポーネント

3.3 プロバイダー

が提供されます

3.4exportAs:string

AngularのexportAsプロパティを利用してください:

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 として受け取られます。このとき、この中の内容はという命令が使える。

3.5 クエリ、ホスト、jit

公式 Web サイトで非常にわかりやすく説明されています:

    クエリ: https://angular.cn /api /core/Directive#queries
  • host:https://angular.cn/api/core/Directive#host
  • jit:https://angular.cn/api/core /ディレクティブ #jit

4. 注入可能

注入可能:

https://angular.cn/api/core /Injectable

@Injectable({
  providedIn: &#39;root&#39;,
})
    'root': ほとんどのアプリケーションのアプリケーション レベルのインジェクター。
  • 'platform': ページ上のすべてのアプリケーションによって共有される特別なシングルトン プラットフォーム インジェクター。
  • 'any': トークンが挿入されるすべてのモジュール (遅延モジュールを含む) に一意のインスタンスを提供します。

5. パイプ

パイプの機能はデータ変換です。

5.1 名前: 文字列

パイプ名

5.2 純粋: ブール値

    true : 純粋なパイプライン。入力パラメーターが変更された場合にのみ変換メソッドが呼び出されます。
  • false: パイプラインは、パラメーターが変更されていなくても、各変更検出サイクルで 1 回呼び出されます。
パイプラインをカスタマイズする:

処理のために名前と ID をパイプラインに渡します

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

その他の使用法に関する最新情報は github でご覧いただけます:

https://github.com/deepthan/blog-angular

プログラミング関連の知識の詳細については、

プログラミング ビデオをご覧ください。 !

以上がAngular のクラス デコレータの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。