Angular에서 사용자 지정 지침을 만드는 방법에 대한 자세한 설명

이 글에서는 Angular에서 맞춤 지침을 만드는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

지시문 소개

Angular에는 세 가지 유형의 지시문이 있습니다.

• 구성 요소, 템플릿이 있는 지시문, 구성 요소는 지시문에서 상속되며 클래스의 UI 관련 속성을 확장합니다.

• 속성 기반 지시어, DOM 요소, 구성 요소 또는 기타 지시어의 동작과 모양을 변경하는 지시어입니다. 예를 들어 NgStyle, NgClass.

• DOM 요소를 추가하거나 제거하여 DOM 레이아웃을 변경하는 구조 지시문입니다. 예를 들어 NgIf, NgFor입니다.

실제 개발에서는 비즈니스 요구에 따라 비즈니스 개발을 촉진하기 위해 Angular 구성 요소의 지침을 확장하는 경우가 많습니다. 자신만의 지시문을 만드는 방법을 살펴보겠습니다. [관련 권장 사항: "angular 튜토리얼"]

속성 기반 지시어 생성

Angular에서 속성 기반 지시어를 생성하려면 @Directive가 포함된 컨트롤이 하나 이상 필요합니다. 데코레이터 장치 클래스. 이 데코레이터는 지시문과 연관된 속성 이름을 식별하는 선택기 이름을 지정합니다. 컨트롤러 클래스는 지시문의 기능적 동작을 구현합니다. @Directive 装饰器的控制器类。这个装饰器指定了一个选择器名称，用于标识与指令相关联的属性名称。控制器类实现了指令的功能行为。

接下来，我们创建一个简单的指令，实现鼠标在元素上悬停时，改变起背景颜色；鼠标移开时，背景颜色消失；鼠标点击时，字体变大；鼠标松开时，字体恢复原样的功能。

指令实现

创建 background-exed.directive.ts 文件，实现如下代码：

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

@Directive({
  selector: '[appBackgroundExe]'
})
export class BackgroundExeDirective {

  @Input('appBackgroundExe')
  highLightColor: string;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    // 这种写法比较丑陋
    // this.elementRef.nativeElement.style.background = 'yellow';
    // 推荐这种写法， Renderer
    this.renderer.setStyle(this.elementRef.nativeElement, 'background', 'yellow');
  }

  @HostBinding('class.pressed')
  isPressed: boolean;

  @HostListener('mouseenter')
  onMouseEnter(): void {
   this.highLight(this.highLightColor);
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.highLight(null);
  }

  @HostListener('mousedown')
  onMouseDown(): void {
    this.isPressed = true;
  }

  @HostListener('mouseup')
  onMouseUp(): void {
    this.isPressed = false;
  }

  private highLight(color: string): void {
    // this.elementRef.nativeElement.style.background = color;
    this.renderer.setStyle(this.elementRef.nativeElement, 'background', color);
  }

}

其中，selector: '[appBackgroundExe]' 是指令关联的属性名称，以便 Angular 在编译时，能从模板中找到与此指令关联的 HTML 代码。

构造函数中，注入了 ElementRef 和 Renderer2 模块的实例。通过 ElementRef 我们可以引用指令标识的 DOM 元素，并对其进行相关的操作；并且可以利用 Renderer2 提供的 API 对元素进行相关的渲染操作。

@HostListener 和 @HostBinding 是属性装饰器。@HostListener 是用来为宿主元素添加事件监听；而指令标记的元素，就是宿主元素。@HostBinding 是用来动态设置宿主元素的属性值。

设置字体样式

• appliation.component.less

.pressed {
  font-size: 30px;
}

在模板中使用指令

• application.component.html

<div class="panel panel-primary">
  <div [appBackgroundExe]="&#39;red&#39;">鼠标移进，元素变成红色。鼠标移出，元素红色消失</div>
</div>

创建结构型指令

结构型指令的创建与属性型指令创建大同小异。

指令实现

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[appIf]'
})
export class IfDirective {

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef
    ) { }

    @Input(&#39;ifCreat&#39;) 
    set condition(condition: boolean) {
       if (condition) {
         this.viewContainerRef.createEmbeddedView(this.templateRef);
       } else {
         this.viewContainerRef.clear();
       }
    }
}

其中，TemplateRef 表示内嵌的 template 模板元素，通过它可以创建内嵌视图。ViewContainerRef 表示一个视图容器，可以添加一个或多个视图，通过它可以创建和管理基于 TemplateRef

다음으로 마우스를 요소 위로 가져갈 때 배경색을 변경하는 간단한 명령을 만듭니다. 마우스를 클릭하면 배경색이 사라지고 마우스를 클릭하면 글꼴이 커집니다. 출시되면 글꼴이 그대로 복원됩니다.

Directive 구현

background-exed.directive.ts 파일을 생성하고 다음 코드를 구현합니다.

<div class="panel panel-primary">
  <div *ifCreate="&#39;true&#39;">hello</div>
</div>

• 그 중 selector: '[appBackgroundExe]'는 directive와 관련된 속성 이름입니다. Angular가 컴파일할 수 있도록 이 지시문과 관련된 HTML 코드를 템플릿에서 찾을 수 있습니다.
생성자에는 ElementRef 및 Renderer2 모듈의 인스턴스가 주입됩니다. ElementRef를 통해 명령으로 식별된 DOM 요소를 참조하고 관련 작업을 수행할 수 있으며 Renderer2에서 제공하는 API를 사용하여 요소에 대한 관련 렌더링 작업을 수행할 수 있습니다. .

@HostListener 및 @HostBinding은 속성 데코레이터입니다. @HostListener는 호스트 요소를 수신하는 이벤트를 추가하는 데 사용되며 명령이 표시된 요소는 호스트 요소입니다. @HostBinding은 호스트 요소의 속성 값을 동적으로 설정하는 데 사용됩니다. 글꼴 스타일 설정

appliation.comComponent.lessrrreee

🎜템플릿에서 지시문 사용🎜🎜🎜🎜application.comComponent.html🎜🎜rrreee🎜🎜🎜구조적 지시문 만들기🎜 🎜🎜🎜구조 유형 창조 명령어의 생성은 속성 유형 명령어 생성과 유사합니다. 🎜🎜🎜명령 구현🎜🎜rrreee🎜그 중 TemplateRef는 임베디드 뷰를 생성할 수 있는 임베디드 템플릿 템플릿 요소를 나타냅니다. ViewContainerRef는 하나 이상의 뷰를 추가할 수 있는 뷰 컨테이너를 나타내며, 이를 통해 TemplateRef 인스턴스를 기반으로 하는 인라인 뷰 또는 구성 요소 뷰를 생성하고 관리할 수 있습니다. 🎜🎜🎜템플릿에서 지시어 사용하기🎜🎜🎜🎜application.comComponent.html🎜🎜rrreee🎜🎜🎜Summary🎜🎜🎜🎜이 글에서는 주로 Angular에서 사용자 정의 지시어를 생성하는 방법을 소개합니다. 실제 개발에서는 우리가 원하는 명령어를 유연하게 생성할 수 있습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 Angular에서 사용자 지정 지침을 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!