Angular自定义指令示例_angular自定义指令例子-优快云博客

本文链接：https://blog.youkuaiyun.com/oneloser/article/details/105800855

本文将通过四个部分深入讲解Angular自定义指令的创建和使用。首先介绍涉及的装饰器@HostBinding()和@HostListener()，然后详细阐述如何创建自定义指令，接着展示TestDirective的代码实现，最后说明如何在项目中应用该指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、涉及装饰器

下面例子中主要用到了@HostBinding()和@HostListener()两个装饰器，具体作用通过运行下面例子就可以明白。

2、创建指令

// 以下命令会创建TestDirective指令并自动添加到AppModule
ng g directive directive/test

3、TestDirective代码

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

@Directive({
  selector: '[appTest]'
})

export class TestDirective {

  @HostBinding('title')
  public title = 'This is a test title!';
    
  @HostBinding('id')
  public testId = '';

  constructor(
    private r2: Renderer2,
    private ef: ElementRef
  ) { }

  @HostListener('click')
  public clickTest() {
    this.testId = 'test-id';
    this.r2.setAttribute(this.ef.nativeElement, 'id', this.testId);
  }

  // test为class选择器名称， .test {font-size: 30px;color #f00;}
  @HostListener('mouseover')
  public overTest() {
    this.r2.addClass(this.ef.nativeElement, 'test');
  }

  // test为class选择器名称， .test {font-size: 30px;color #f00;}
  @HostListener('mouseout')
  public outTest() {
    this.r2.removeClass(this.ef.nativeElement, 'test');
  }

}

4、使用指令

<h3 title="" appTest>自定义指令测试内容</h3>