首先

在属性指令中，可以注册事件处理。本文将介绍如何实现此方法。

最新消息

2021年1月9日

記事内で扱ったコードを Angular v11.0.5 で確認しました

工作环境

有关文章

[Angular] 属性ディレクティブを自作する

本篇文章所討論的組成

本文将探讨以下所示的结构。

src/
  `-app/
    `-component/
    |  `-use-directive/                       # ディレクティブを適用するコンポーネント
    |    `- use-directive.component.css
    |    `- use-directive.component.html
    |    `- use-directive.component.ts
    `-directive/
    |  `- event.directive.ts                  # 本記事で扱うディレクティブ
    `- app.component.css
    `- app.component.html
    `- app.component.ts
    `- app.module.ts

在属性指令中处理事件。

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

@Directive({
  selector: '[appEvent]'
})
export class EventDirective {

  /**
   * コンストラクタ
   *
   * @param {ElementRef} elementRef このディレクティブがセットされたDOMへの参照
   * @memberof TemplateDirective
   */
  constructor(
    private elementRef: ElementRef
  ) {
  }

  /**
   * イベントリスナー
   * マウスイベントをキャッチして背景色を変更する
   *
   * @param {*} target このディレクティブが適用されているhtml要素
   * @memberof EventDirective
   */
  @HostListener('mouseenter', ['$event.target']) changeBackgroundColor(target: any) {
    console.log(target);
    this.elementRef.nativeElement.style.backgroundColor = 'rgb(255, 0, 0)';
  }

  /**
   * イベントリスナー
   * マウスリーブイベントをキャッチして背景色を変更する
   *
   * @param {*} target このディレクティブが適用されているhtml要素
   * @memberof EventDirective
   */
  @HostListener('mouseleave', ['$event.target']) restoreBackgroundColor(target: any) {
    console.log(target);
    this.elementRef.nativeElement.style.backgroundColor = 'rgb(219, 210, 224)';
  }
}

请按顺序查看以下要点。

用 @HostListener 进行修饰

要通过指令在事件处理中注册，只需要使用 @HostListener 修饰方法即可。更具体地说，

import { HostListener } from '@angular/core';

第一点是导入HostListener。

  @HostListener('イベント名', '[イベント引数]') メソッド名(target: any) {
    // イベント処理を実装する
  }

使用 @HostListener 修饰方法是第二个要点。
通过以上两点完成事件注册。

在使用@HostListener修饰时，可以将事件名称作为第一个参数，事件信息作为第二个参数进行指定。而通过指定的第二个参数，实际上将事件信息传递给了方法作为参数。

让我们来看一下实际代码中的事件注册部分吧。

鼠标进入事件监听器

  /**
   * イベントリスナー
   * マウスイベントをキャッチして背景色を変更する
   *
   * @param {*} target このディレクティブが適用されているhtml要素
   * @memberof EventDirective
   */
  @HostListener('mouseenter', ['$event.target']) changeBackgroundColor(target: any) {
    console.log(target);
    this.elementRef.nativeElement.style.backgroundColor = 'rgb(255, 0, 0)';
  }

这是一个mouseenter事件的监听器。
当鼠标光标触碰到应用了event.directive指令的组件元素时，它将触发。
在这里，我们只是进行了一个简单的处理，将背景颜色更改为红色。
注意，我们也进行了日志输出，输出内容是触发事件时元素的内容。

mouseleave 事件监听器

  /**
   * イベントリスナー
   * マウスリーブイベントをキャッチして背景色を変更する
   *
   * @param {*} target このディレクティブが適用されているhtml要素
   * @memberof EventDirective
   */
  @HostListener('mouseleave', ['$event.target']) restoreBackgroundColor(target: any) {
    console.log(target);
    this.elementRef.nativeElement.style.backgroundColor = 'rgb(219, 210, 224)';
  }

这是一个mouseleave的事件监听器。
与mouseenter相同，当鼠标指针离开应用了event.directive指令的组件元素时触发。
处理的内容只是将背景色恢复为原始状态。
输出的日志与mouseenter相同，输出的是事件触发时元素的内容。

从组件中使用指令。

只需要应用指令的代码，但是在组件模板中，作为使用方的组件应该显示如下：

<p>
  属性ディレクティブにイベント処理を登録するサンプル。<br>
  <span appEvent>ここの背景色</span> がマウスエンターとマウスリーブのイベントで切り替わる。
</p>

在适用 event.directive 的部分用标签括起来的内容，在前面的事件监听器中作为参数传递并输出日志的信息，就是被这个标签所包围的部分。

运行结果

刚开机

由于刚启动，没有日志输出，只是简单地显示页面。

鼠标移入｢这里的背景颜色｣

鼠标进入事件被触发，背景色变为红色。同时可以从日志中看到输出了事件触发时的信息(背景颜色为rgb (219, 210, 224))。

从”这里的背景颜色”移开鼠标

鼠标离开事件被触发，可以确认背景色已恢复原样。从日志中也可看到(背景色: rgb(255, 0, 0))，证实了事件触发时的信息已输出。

程式碼

因为这篇文章中使用的代码是用于进行操作确认的，所以我在这里上传了，供参考…

请提供更多的上下文信息，以便我可以准确地将其翻译成中文。

本家の Attribute Directives