지시문 지침에 대한 각도 학습 설명

이 글은 계속해서 Angle을 학습하고 angular의 지시어 사용법을 간략하게 이해하는 데 도움이 될 것입니다.

Directive는 DOM을 수정하고 DOM에 추가 동작을 추가하는 데 사용됩니다. [추천 관련 튜토리얼: angularjs 동영상 튜토리얼, 프로그래밍 동영상]

Angular 내장 지침angular.cn/guide/build…

예를 들어 개발에서 일반적으로 사용되는*ngFor은 다음 작업에 사용되는 명령어입니다. DOM 요소를 탐색하고 렌더링합니다

아래 링크를 참조할 수 있습니다. 이 지침에 대한 사용 사례를 작성했습니다

rick-chou.github.io/angular-tut…

여기에서는 주로 방법을 소개하겠습니다. 자신만의 명령어를 맞춤화하세요

예제 예를 들어 마우스가 안팎으로 움직일 때 DOM 배경색이 바뀌기를 바랍니다

<!-- 默认 鼠标移入时背景变成黄色 -->
<p highlight>Highlight me!</p>
<!-- 指定颜色 鼠标移入时背景变成红色 -->
<p highlight="red">Highlight me!</p>

이 예를 구현해 보겠습니다

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

// Directive装饰器 可以接收一个对象参数 但是现在我们还不需要
@Directive()
export class HighlightDirective {
  // 给这个指定定义一个 highlight 属性
  @Input() highlight = 'yellow';

  // 这里的 el 就是被我们的指令直接修饰的那个dom
  constructor(private el: ElementRef) {
    // 你可以在这里直接操作 dom
  }

  // 给这个dom定义一个mouseenter的监听器 后面的名字可以自定定义
  @HostListener('mouseenter') 
  onMouseEnter() {
    this.highlight(this.highlight);
  }

  // 添加鼠标移出的监听器 绑定对应的事件逻辑
  @HostListener('mouseleave') 
  onMouseLeave() {
    this.highlight('');
  }

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

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 튜토리얼 ! !

위 내용은 지시문 지침에 대한 각도 학습 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!