ホームページ > 記事 > ウェブフロントエンド > Angular のクラス デコレータの詳細な分析
本篇文章带大家了解一下Angular中的5种类(class)装饰器,希望对大家有所帮助!
angular共有5种类装饰器,表明每个类的用途,angular用何种方式解析它。
NgModule
: 标明是一个模块Component
:标明是一个组件Directive
: 标明是一个指令Injectable
: 标明是一个服务Pipe
: 标明是一个管道NgModule
把一个类标记为模块,并可以在这个类中配置这个模块中用到的数据。【相关教程推荐:《angular教程》】
它支持做如下配置:(下同)
导入本模块需要用到的模块,注意懒加载的模块不能导入,否则懒加载就没有作用了。
声明组件、指令、管道,这三个统称为可申明对象。
注册服务
其他模块若想使用本模块的组件、指令或管道,则需要将其抛出去。
为啥要抛出去?angular规定可声明对象应该且只能属于一个 NgModule。
告诉 Angular 哪些是动态组件,Angular 都会为其创建一个 ComponentFactory,并将其保存到 ComponentFactoryResolver 中。
若要写一个动态组件不仅要在这里加,还需要在declarations
中申明。
当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。
该 NgModule 中允许使用的声明元素的 schema(HTML 架构)。 元素和属性(无论是 Angular 组件还是指令)都必须声明在 schema 中。
当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined,则该模块不会被注册进 getModuleFactory 中。
如果为 true,则该模块将会被 AOT 编译器忽略,因此始终会使用 JIT 编译。
一个装饰器,用于把某个类标记为 Angular 组件,并为它配置一些元数据,以决定该组件在运行期间该如何处理、实例化和使用。 组件是特殊的指令,它的一部分属性继承自 Directive 装饰器。
css选择器名称, 可以是标签名、属性、class等,一般都是以标签来命名,具体见指令选择器部分。
如selector: 'mo-dir'
在html中使用为 88119e2bf5e7fdd9daed54514cbfd87606404762ae6c64591e08ae30689a7f0d
也可以使用属性来定义, 如selector: '[mo-dir]'
在html中使用为 2b5cf4925f5177952a6516211a36db4d16b28748ea4df4d9c2150843fecfba68
这两个同时只能用1个
dc6dce4a544fdca2df29d5ac0ea9906b我是html内容16b28748ea4df4d9c2150843fecfba68
1 つ以上のアニメーション Trigger() 呼び出し (一部の状態を含む) ) とtransition() の定義。
サービスはここに登録して使用できます
変更を指定します現在のコンポーネントの検出戦略。
コンポーネントによって渡されるパラメーターは、@Input
と同等です。 @Input
との違いは、配列であることです。
@Component({ selector: 'mo-dir', inputs: [id: 123], template: ` {{ id }} ` }) class BankAccount { id: number; }
入力の内容は、id 属性があることを示しており、デフォルト値は 123 です。 @入力 ID: 数値 = 123
と同等。
イベント出力、@Output
と同等、@Output
とは異なります。配列。
@Component({ selector: 'mo-dir', outputs: [ 'idChange' ] }) class ChildDir { idChange: EventEmitter<string> = new EventEmitter<string>(); }
は、@output idChange: EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e();
と同等です。
@Directive({ selector: 'mo', })
<mo></mo>
@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>は含まれません。上記の命令の最初の命令は一致しませんが、2 番目の命令は一致します。
@Directive({ selector: '.foo, .bar', })
<div class="foo"></div> <div class="bar></div> <div class="foo bar"></div>上記の3つの命令が追加されます。
AngularのexportAsプロパティを利用してください: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 として受け取られます。このとき、この中の内容はという命令が使える。
注入可能:https://angular.cn/api/core /Injectable@Injectable({ providedIn: 'root', })
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'mo', }) export class MoPipe implements PipeTransform { transform(name: string, id: number): any { // 对传进来的数组进行处理,再return出去 } }
@Component({ selector: 'mo-dir', template: ` <p> {{ name | mo: id }} </span> ` }) class BankAccount { name: string = "deepthan" id: number = 1; }
その他の使用法に関する最新情報は github でご覧いただけます:プログラミング関連の知識の詳細については、https://github.com/deepthan/blog-angular
プログラミング ビデオをご覧ください。 !
以上がAngular のクラス デコレータの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。