Pembelajaran sudut bercakap tentang arahan Arahan

Artikel ini akan membantu anda meneruskan pembelajaran sudut dan memahami secara ringkas penggunaan arahan Arahan dalam sudut Saya harap ia akan membantu anda!

Arahan digunakan untuk mengubah suai DOM untuk menambah gelagat tambahan padanya. [Tutorial berkaitan yang disyorkan: tutorial video angularjs, Video pengaturcaraan]

Arahan terbina dalam sudutangular.cn/guide/built…

Sebagai contoh, *ngFor yang biasa digunakan dalam pembangunan adalah arahan yang digunakan untuk melintasi dan menjadikan unsur -unsur DOM

anda boleh merujuk kepada pautan di bawah. kes untuk arahan ini

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

Di sini saya akan memperkenalkan terutamanya cara menyesuaikan anda sendiri arahan

Contohnya, kami berharap warna latar belakang DOM akan bertukar apabila tetikus bergerak masuk/keluar

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

Mari kita laksanakan contoh ini

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;
  }
}

Untuk lebih lanjut pengetahuan berkaitan pengaturcaraan, sila layari: Pengajaran pengaturcaraan! !

Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang arahan Arahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!