简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  深入淺析Angular中的類別（class）裝飾器

深入淺析Angular中的類別（class）裝飾器

青灯夜游
青灯夜游轉載
2021-11-11 10:13:121859瀏覽

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

深入淺析Angular中的類別（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 是html檔案路徑位址

2.3 styles、styleUrls

  • styles 是直接寫的css樣式
  • styleUrls 是css檔案路徑位址

2.4 animations

一個或多個動畫trigger() 調用，包含一些state( ) 和transition() 定義。

2.5 providers

服務可以在這裡面註冊就可以使用了

2.6 changeDetection

#指定目前組件的變更偵測策略。

2.7 inputs： string[]

元件傳入的參數，相當於@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: &#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接收指令實例，這時就可以用這個指令裡的內容了。

3.5 queries、host、jit

官網講得挺清楚：

  • 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 

@Injectable({
  providedIn: &#39;root&#39;,
})
  • 'root'：大多數應用程式中的應用程式層級注入器。
  • '平台'：頁面上所有應用程式共享的特殊單例平台注入器。
  • 'any'：在每個注入令牌的模組（包括惰性模組）中提供唯一的實例。

5. pipe

管道的作用是資料轉換。

5.1 name: string

管道名稱

5.2 pure: boolean

  • true : 純管道，transform方法只有在輸入參數變化時參數會被呼叫
  • false: 該管道會在每個變更偵測週期中都被呼叫一次－ 即使其參數沒有發生任何變化。

自訂一個管道：

把名字和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中的類別（class）裝飾器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除
上一篇：總結分享一些基於Node.js的前端面試題（附解析）下一篇：總結分享一些基於Node.js的前端面試題（附解析）

相關文章

看更多