집 >웹 프론트엔드 >JS 튜토리얼 >Angular의 클래스 데코레이터에 대한 심층 분석

Angular의 클래스 데코레이터에 대한 심층 분석

青灯夜游앞으로: 2021-11-11 10:13:121968검색

本篇文章带大家了解一下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은 html 파일 경로 주소

2.3 styles, styleUrls

styles는 직접 작성한 CSS 스타일
styleUrls는 CSS 파일 경로 주소

2.4 animations

하나 또는 일부 state() 및 Transition() 정의를 포함하는 추가 애니메이션 Trigger() 호출.

2.5 제공자

여기에서 서비스를 등록하여 사용할 수 있습니다.

2.6changeDetection

현재 구성요소의 변경 감지 전략을 지정하세요.

2.7 입력: string[]

구성 요소에 의해 전달된 매개 변수로 @Input<code>@Input。和@Input不同的是它是一个数组。

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

inputs中的内容表示有个id属性，默认值是123。相当于@Input id: number = 123。

2.8 outputs：string[]

事件输出，相当于@Output，和@Output不同的是它是一个数组。

@Component({
  selector: &#39;mo-dir&#39;,
  outputs: [ &#39;idChange&#39; ]
})
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과 동일합니다. @Input

과의 차이점은 배열이라는 점입니다.

@Injectable({
  providedIn: &#39;root&#39;,
})

inputs의 내용은 id 속성이 있음을 나타내며 기본값은 123입니다. @입력 ID: 숫자 = 123과 동일합니다.

2.8 출력: string[]

이벤트 출력, @Output

@Output<li>과의 차이점은 배열이라는 점 . </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> <code>@output idChange와 동일: EventEmitter98c455a79ddfebb79781bff588e7b37e = new EventEmitter98c455a79ddfebb79781bff588e7b37e();

3.Directive

3.1 선택기: string

템플릿에 사용되는 CSS 선택기입니다. 지시어를 입력하고 지시어의 인스턴스화를 트리거합니다. 다음 형식 중 하나를 사용할 수 있습니다

요소 이름 또는 태그 이름

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

rrreee

class
rrreeerrreee

속성 이름

rrreeerrreee

속성 이름 = 속성 값

rrreeerrreee

선택 장치가 포함되어 있지 않습니다.

예를 들어 mo

속성이 일치하지만 class

.foo<h4 data-id="heading-28">
<strong>rrreeerrreee</strong>를 포함하지 않는 경우 위 지침 중 첫 번째 지침은 일치하지 않지만 두 번째 지침은 일치합니다. </h4>
<ul>
<li>여러 개 중 하나만 일치시키세요</li>
<li>여러 개를 동시에 작성할 수 있습니다. 둘 중 하나가 일치하면 쉼표를 사용하여 구분하세요. </ul>rrreeerrreee<p>위 3가지 명령어가 추가됩니다. </p>
<h4 data-id="heading-21"></h4>
<p>3.2 입력, 출력: 문자열[]</p>
<blockquote>
<p>동일한 구성 요소</p>
<h4 data-id="heading-22"></h4>
<p>3.3 공급자</p>
</blockquote>
<p>사용 중인 서비스 삽입 <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频"><h4 data-id="heading-23"></h4></a>3.4 importAs: string</p>🎜🎜🎜Angular의 importAs 속성 활용: 🎜🎜https://netbasal.com/angular-2-take-advantage- of -the-exportas-property-81374ce24d26🎜🎜🎜 외부 사용을 위해 변수에 명령을 던집니다. 🎜🎜예를 들어, 텍스트 색상을 수정하는 명령어를 작성하세요🎜rrreeerrreee🎜 이 명령어는 <code>[changeColor]🎜 속성을 통해 p 요소를 얻은 다음 <code>를 통해 해당 명령어를 <code>changeColor🎜 변수로 던집니다. importAs🎜, html 템플릿에서는 <code>#changeColorRef🎜를 사용하여 명령어 인스턴스를 받습니다. 이때 이 명령어의 내용을 사용할 수 있습니다. 🎜🎜🎜3.5 쿼리, 호스트, 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. 주입 가능🎜🎜🎜🎜 주입 가능:🎜🎜https://angular.cn /api /core/Injectable🎜🎜rrreee🎜🎜'root': 대부분의 애플리케이션에 있는 애플리케이션 수준 인젝터입니다. 🎜🎜 '플랫폼': 페이지의 모든 애플리케이션이 공유하는 특수 싱글톤 플랫폼 인젝터입니다. 🎜🎜'any': 토큰을 주입하는 모든 모듈(게으른 모듈 포함)에 고유한 인스턴스를 제공합니다. 🎜🎜🎜🎜5.pipe🎜🎜🎜파이프의 기능은 데이터 변환입니다. 🎜🎜🎜5.1 name: string🎜🎜🎜pipeline name🎜🎜🎜5.2 pure: boolean🎜🎜🎜🎜true: 순수 파이프라인, 변환 메서드는 입력 매개변수가 변경될 때만 호출됩니다🎜🎜false: 파이프라인은 매 호출됩니다. time 매개변수가 변경되지 않은 경우에도 변경 감지 주기 동안 한 번 호출됩니다. 🎜🎜🎜파이프라인 사용자 정의: 🎜🎜처리를 위해 이름과 ID를 파이프라인에 전달🎜rrreeerrreee🎜🎜github의 추가 사용 업데이트:🎜🎜https://github.com/deepthan/blog-angular🎜🎜🎜자세히 알아보기 프로그래밍 관련 지식은 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angular의 클래스 데코레이터에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Node.js 기반 프론트엔드 인터뷰 질문 요약 및 공유(분석 포함)다음 기사：Node.js 기반 프론트엔드 인터뷰 질문 요약 및 공유(분석 포함)

Angular의 클래스 데코레이터에 대한 심층 분석

1. NgModule

1.1 imports

1.2. declarations: Array8cdcaf1eb092ddf0e71187b21b558ea9

1.3. providers: []

1.4 exports: Array8cdcaf1eb092ddf0e71187b21b558ea9

1.5 entryComponents: []

1.6 bootstrap：Array8cdcaf1eb092ddf0e71187b21b558ea9

1.7 schemas: Array6442314f0169a8ba2468517ae5d33400

1.8 id: string

1.9 jit: true

2. Component

2.1 selector: string

2.2 template： string、templateUrl：string

2.3 styles, styleUrls

2.4 animations

2.5 제공자

2.6changeDetection

2.7 입력: string[]

2.8 outputs：string[]

3. Directive

3.1 selector： string

3.2 inputs、outputs: string[]

3.3 providers

3.4 exportAs: string

@Injectable({ providedIn: &#39;root&#39;, })inputs의 내용은 id 속성이 있음을 나타내며 기본값은 123입니다. @입력 ID: 숫자 = 123과 동일합니다.

3.Directive

rrreeerrreee

선택 장치가 포함되어 있지 않습니다.

관련 기사

1. `NgModule`

@Injectable({ providedIn: 'root', })
inputs의 내용은 id 속성이 있음을 나타내며 기본값은 123입니다. `@입력 ID: 숫자 = 123`과 동일합니다.