Angular의 지시어에 대해 이야기해 봅시다.

이 글에서는 Angular의 지시문을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

환경:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual Studio Code

1. 요약

---

Directive는 Angular 1.0 시대(당시 AngularJS라고 함)에 매우 인기가 있었지만 지금은 거의 사용되지 않습니다. 기존 요소(DOM)를 확장하기 위해 명령어(Directive)를 사용한다고 간단히 이해하면 됩니다. [관련 튜토리얼 추천 : "angular tutorial"]

2. 컴포넌트와 명령어의 관계

---

Angular 소스 코드를 보면 다음과 같은 정의를 볼 수 있습니다

/**
 * Supplies configuration metadata for an Angular component.
 *
 * @publicApi
 */
export declare interface Component extends Directive {

네, 컴포넌트입니다. Directive에서 파생됩니다. 즉, Component는 Directive에 속합니다.

2.1. 지침 유형

• Component는 Directive의 하위 인터페이스이며 특수 지침은 HTML 템플릿을 가질 수 있습니다.

• 속성 유형 지시문: DOM 요소의 모양과 동작을 수정하는 데 사용되지만 DOM 구조는 변경되지 않습니다. Angular 내장 지시문의 일반적인 속성 유형 지시문에는 ngClass 및 ngStyle이 포함됩니다. 자신만의 컴포넌트 라이브러리, 속성 유형 지시문을 캡슐화하는 필수 콘텐츠입니다.

• 구조적 지침: DOM 구조를 수정할 수 있습니다. 내장된 공통 구조적 지침에는 *ngFor, *ngIf 및 *ngSwitch</code가 포함됩니다. >. 구조적 지시어는 DOM 구조를 수정하므로 동일한 HTML 태그에 여러 구조적 지시어를 동시에 사용할 수 없습니다. 동일한 HTML 요소에 여러 구조적 지시문을 사용하려는 경우 외부 빈 레이어(<code>p)와 같이 요소의 빈 레이어를 추가하여 중첩하는 것을 고려할 수 있습니다. *ngFor、*ngIf 和 *ngSwitch。由于结构型指令会修改 DOM 结构，因而同一个 HTML 标签上面不能同时使用多个结构型指令。如果要在同一个 HTML 元素上面使用多个结构性指令，可以考虑加一层空的元素来嵌套，比如在外面套一层空的（p) 。

3. Angular 中指令的用途

---

Angualr中用指令来增强DOM的功能，包括 HTML 原生DOM和我们自己自定义的组件（Component）。举例来说，可以扩展一个Button，实现避免点击后，服务器端未响应前的二次点击；高亮某些收入内容等等。

4. 指令举例

---

4.1. 指令功能

实现一个指令，鼠标移动到上面时， 背景显示为黄色，鼠标移开，恢复正常。

4.2. Anuglar CLI生成基本文件

ng generate directive MyHighlight

Anuglar CLI自动生成html、css、ut等文件。

4.3. Directive指令核心代码

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

4.4. 使用该指令

<p my-highlight>Highlight me!</p>

my-highlight 即我们的元素扩展属性（指令、directive）。

5. 总结

---

• 指令（Directive）用于扩展DOM 元素或组件的功能。

• Angular中的 *ngFor、*ngIf 和 *ngSwitch

3. Angular에서 지침의 목적

🎜 지침은 Angularr에서 HTML 기본 DOM 및 자체 사용자 정의 구성 요소를 포함하여 DOM의 기능을 향상시키는 데 사용됩니다. 예를 들어, 클릭 후 서버가 응답하기 전에 2차 클릭을 방지하기 위해 버튼을 확장할 수 있습니다. 🎜🎜🎜🎜4. 명령어 예시 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜4.1. 명령어 기능 🎜🎜🎜🎜🎜 명령어를 실행하면 배경이 노란색으로 표시됩니다. 마우스를 움직이면 정상으로 돌아갑니다. 🎜🎜🎜🎜4.2 Anuglar CLI는 기본 파일을 생성합니다🎜🎜🎜rrreee🎜Anuglar CLI는 html, css, ut 및 기타 파일을 자동으로 생성합니다. 🎜🎜🎜🎜🎜🎜4.3. 지시어 명령어 핵심 코드 🎜🎜🎜rrreee🎜🎜🎜4.4. 이 명령어를 사용하세요🎜🎜🎜rrreee🎜🎜my-highlight는 요소 확장 속성(directive, directive)입니다. . 🎜🎜🎜🎜5. 요약🎜🎜🎜🎜🎜🎜지시문은 DOM 요소 또는 구성 요소의 기능을 확장하는 데 사용됩니다. Angular의 🎜🎜🎜🎜*ngFor, *ngIf 및 *ngSwitch는 모두 Angular에 내장된 명령어입니다. 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angular의 지시어에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!