Analisis mendalam penghias kelas dalam Angular

青灯夜游
Lepaskan: 2021-12-20 09:04:59
ke hadapan
1931 orang telah melayarinya

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

Analisis mendalam penghias kelas dalam Angular

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 ialah alamat laluan fail html

2.3 gaya, styleUrls

  • gaya ditulis secara langsung css Gaya
  • styleUrls ialah alamat laluan fail css

2.4 animasi

Satu atau lebih panggilan pencetus() animasi, termasuk beberapa keadaan( ) dan takrifan peralihan().

Pembekal 2.5

Perkhidmatan boleh didaftarkan di sini dan digunakan

2.6 changeDetection

Menentukan perubahan strategi pengesanan untuk komponen semasa.

2.7 input: rentetan[]

Parameter yang diluluskan oleh komponen, bersamaan dengan @Input<code>@Input. Perbezaan daripada @Input<code>@Input ialah ia adalah tatasusunan.

@Component({
  selector: &#39;mo-dir&#39;,
  inputs: [id: 123],
  template: `
   {{ id }}
  `
})
class BankAccount {
  id: number;
}
Salin selepas log masuk

Kandungan dalam input menunjukkan bahawa terdapat atribut id, dan nilai lalai ialah 123. Bersamaan dengan @Input id: number = 123<code>@Input id: number = 123.

2.8 output: rentetan[]

output acara, bersamaan dengan @Output<code>@Output, berbeza daripada @Output<code>@Output Ia adalah tatasusunan.

@Component({
  selector: &#39;mo-dir&#39;,
  outputs: [ &#39;idChange&#39; ]
})
class ChildDir {
 idChange: EventEmitter<string> = new EventEmitter<string>();
}
Salin selepas log masuk

bersamaan dengan @output idChange: EventEmitter<string> = new EventEmitter<string>();<code>@output idChange: EventEmitter<string> = new EventEmitter<string>();.

3. Arahan

3.1 pemilih: rentetan

Ia ialah pemilih css yang digunakan untuk menandakan dalam templat Keluar dari arahan dan mencetuskan instantiasi arahan. Anda boleh menggunakan salah satu daripada borang berikut

  • nama elemen atau nama tag
@Directive({
  selector: &#39;mo&#39;,
})
Salin selepas log masuk
<mo></mo>
Salin selepas log masuk
  • kelas
@Directive({
  selector: &#39;.mo&#39;,
})
Salin selepas log masuk
<div class=".mo"></div>
Salin selepas log masuk
  • Nama atribut
@Directive({
  selector: &#39;[mo]&#39;,
})
Salin selepas log masuk
<div mo></div>
Salin selepas log masuk
  • Nama atribut = nilai atribut
@Directive({
  selector: &#39;[type=text]&#39;,
})
Salin selepas log masuk
<input type="text"></div>
Salin selepas log masuk
    <🎜 🎜> Tidak mengandungi pemilih tertentu
Contohnya, ia sepadan dengan atribut mo<p> tetapi tidak mengandungi class<code>.foo<code>mo.foo<🎜. >

@Directive({
  selector: &#39;div[mo]:not(.foo)&#39;,
})
Salin selepas log masuk
Arahan pertama daripada arahan di atas tidak akan dipadankan, tetapi yang kedua akan dipadankan.
<div mo></div>
Salin selepas log masuk

Hanya padankan satu daripada berbilang yang
  • Anda boleh menulis berbilang pada masa yang sama, gunakan koma untuk memisahkannya.

@Directive({
  selector: &#39;.foo, .bar&#39;,
})
Salin selepas log masuk
Tiga arahan di atas akan ditambah.
<div class="foo"></div>
<div class="bar></div>
<div class="foo bar"></div>
Salin selepas log masuk

3.2 input, output: rentetan[]

Komponen yang sama

3.3 pembekal

akan berfungsi Suntikan menggunakan

3.4 exportAs: string

Manfaatkan ExportAs Property dalam Angular:

https://netbasal.com /angular-2-take-advantage-of-the-exportas-property-81374ce24d26

Lemparkan arahan sebagai pembolehubah untuk kegunaan luaran.

Contohnya, tulis arahan untuk mengubah suai warna teks Perintah

@Directive({
 selector: &#39;[changeColor]&#39;,
 exportAs: &#39;changeColor&#39;
})
class ChangeColorDirective {
    
    toggleColor() {
        // 修改颜色的逻辑
    }
}
Salin selepas log masuk
mendapatkan elemen p melalui atribut [changeColor]
<p changeColor #changeColorRef="changeColor"></p>

<button (click)="changeColorRef.toggleColor()"></button>
Salin selepas log masuk
, dan kemudian lulus exportAs <p> Lempar perintah sebagai <code>changeColor<code>[changeColor] pembolehubah, dan gunakan #changeColorRef<code>exportAs untuk menerima contoh arahan dalam templat html perintah. changeColor#changeColorRef

3.5 pertanyaan, hos, jit

Tapak web rasmi menerangkannya dengan sangat jelas:

pertanyaan: https://angular.cn /api /core/Directive#queries
  • hos:https://angular.cn/api/core/Directive#host
  • jit:https://angular.cn/api/core /Arahan #jit
4 Boleh Disuntik

Boleh Disuntik:

https://angular.cn/api/core /Boleh disuntik

@Injectable({
  providedIn: &#39;root&#39;,
})
Salin selepas log masuk
'root': Penyuntik peringkat aplikasi dalam kebanyakan aplikasi.
  • 'platform': Penyuntik platform tunggal khas yang dikongsi oleh semua aplikasi pada halaman.
  • 'mana-mana': Sediakan contoh unik dalam setiap modul yang menyuntik token (termasuk modul malas).
5.

Fungsi paip ialah penukaran data.

Nama 5.1: rentetan

nama paip

5.2 tulen: boolean

benar : Talian paip tulen, kaedah transformasi hanya akan dipanggil apabila parameter input berubah
  • salah: Talian paip akan dipanggil sekali dalam setiap kitaran pengesanan perubahan - walaupun parameternya tidak berubah.
  • Sesuaikan saluran paip:

Lepaskan nama dan id ke dalam saluran paip untuk diproses

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

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

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Analisis mendalam penghias kelas dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan