【初心者向け】Angularでアンカータグをクリックしたときにコンソールログを出力する方法

2024-05-23

Angular でアンカータグにクリックイベントをアタッチする方法

イベントバインディングは、テンプレート内の HTML 要素にイベントハンドラ関数を直接バインドする方法です。これは、最もシンプルで分かりやすい方法です。

<a href="#" (click)="handleClick()">リンク</a>

上記のコードでは、handleClick() という名前の関数がアンカータグの click イベントにバインドされています。この関数は、アンカータグがクリックされたときに呼び出されます。

@HostListener デコレータは、コンポーネントのホスト要素にイベントリスナーを定義する方法です。これは、イベントハンドラ関数をコンポーネントクラス内に定義したい場合に便利です。

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

@Component({
  selector: 'app-root',
  template: `
    <a href="#">リンク</a>
  `
})
export class AppComponent {
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    console.log('リンクがクリックされました！');
  }
}

マウスイベントの種類

click イベント以外にも、mouseover, mouseout, mousedown, mouseup などのマウスイベントをアタッチすることができます。

<a href="#" (mouseover)="handleMouseOver()">マウスオーバー</a>
<a href="#" (mouseout)="handleMouseOut()">マウスアウト</a>
<a href="#" (mousedown)="handleMouseDown()">マウスダウン</a>
<a href="#" (mouseup)="handleMouseUp()">マウスアップ</a>

イベントハンドラ関数は、イベントオブジェクトを引数として受け取ることができます。このイベントオブジェクトには、クリックされた要素、クリックされたボタン、マウスの位置など、イベントに関する情報が含まれています。

handleClick(event: MouseEvent) {
  console.log('クリックされた要素:', event.target);
  console.log('クリックされたボタン:', event.button);
  console.log('マウスの位置:', event.clientX, event.clientY);
}

イベントの伝達

イベントは、イベントが発生した要素から親要素へと伝達されます。親要素でイベントを処理するには、event.stopPropagation() メソッドを使用します。

<div (click)="handleParentClick()">
  <a href="#" (click)="handleChildClick()">リンク</a>
</div>

handleParentClick(event: MouseEvent) {
  console.log('親要素がクリックされました！');
}

handleChildClick(event: MouseEvent) {
  console.log('子要素がクリックされました！');
  event.stopPropagation();
}

Angular でアンカータグにクリックイベントをアタッチするには、イベントバインディングと @HostListener デコレータの 2 つの方法があります。これらの方法を理解することで、様々なインタラクティブな Angular アプリケーションを作成することができます。

イベントバインディング

<a href="#" (click)="handleClick()">リンク</a>

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

@Component({
  selector: 'app-root',
  template: `
    <a href="#" (click)="handleClick()">リンク</a>
  `
})
export class AppComponent {
  handleClick() {
    console.log('リンクがクリックされました！');
  }
}

@HostListener デコレータ

<a href="#">リンク</a>

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

@Component({
  selector: 'app-root',
  template: `
    <a href="#">リンク</a>
  `
})
export class AppComponent {
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    console.log('リンクがクリックされました！');
  }
}

<a href="#" (mouseover)="handleMouseOver()">マウスオーバー</a>
<a href="#" (mouseout)="handleMouseOut()">マウスアウト</a>
<a href="#" (mousedown)="handleMouseDown()">マウスダウン</a>
<a href="#" (mouseup)="handleMouseUp()">マウスアップ</a>

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

@Component({
  selector: 'app-root',
  template: `
    <a href="#" (mouseover)="handleMouseOver()">マウスオーバー</a>
    <a href="#" (mouseout)="handleMouseOut()">マウスアウト</a>
    <a href="#" (mousedown)="handleMouseDown()">マウスダウン</a>
    <a href="#" (mouseup)="handleMouseUp()">マウスアップ</a>
  `
})
export class AppComponent {
  handleMouseOver() {
    console.log('マウスオーバー');
  }

  handleMouseOut() {
    console.log('マウスアウト');
  }

  handleMouseDown() {
    console.log('マウスダウン');
  }

  handleMouseUp() {
    console.log('マウスアップ');
  }
}

イベントハンドラ関数の引数

<a href="#" (click)="handleClick($event)">リンク</a>

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

@Component({
  selector: 'app-root',
  template: `
    <a href="#" (click)="handleClick($event)">リンク</a>
  `
})
export class AppComponent {
  handleClick(event: MouseEvent) {
    console.log('クリックされた要素:', event.target);
    console.log('クリックされたボタン:', event.button);
    console.log('マウスの位置:', event.clientX, event.clientY);
  }
}

<div (click)="handleParentClick()">
  <a href="#" (click)="handleChildClick()">リンク</a>
</div>

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

@Component({
  selector: 'app-root',
  template: `
    <div (click)="handleParentClick()">
      <a href="#" (click)="handleChildClick()">リンク</a>
    </div>
  `
})
export class AppComponent {
  handleParentClick(event: MouseEvent) {
    console.log('親要素がクリックされました！');
  }

  handleChildClick(event: MouseEvent) {
    console.log('子要素がクリックされました！');
    event.stopPropagation();
  }
}

その他

上記のコードはあくまで一例です。必要に応じて、コードをカスタマイズすることができます。

Angularでアンカータグにクリックイベントをアタッチするその他の方法

ルーターリンクを使用する

Angularのルーターリンクを使用すると、アンカータグをクリックしたときに別のコンポーネントに遷移することができます。

<a routerLink="/other-component">リンク</a>

ng-clickディレクティブは、Angular 1.xで使用されていた古い方法です。現在でも使用することはできますが、イベントバインディングの方が推奨されています。

<a href="#" ng-click="handleClick()">リンク</a>

jQueryを使用すると、Angularのイベントシステムとは別にイベントを処理することができます。

<a href="#">リンク</a>

$(document).ready(function() {
  $('a').on('click', function() {
    console.log('リンクがクリックされました！');
  });
});

カスタムディレクティブを作成すると、独自のイベントハンドラロジックをカプセル化することができます。

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

@Directive({
  selector: '[appClick]'
})
export class ClickDirective {
  @Output() click = new EventEmitter<MouseEvent>();

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    this.click.emit(event);
  }
}

<a href="#" appClick (click)="handleClick($event)">リンク</a>

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

@Component({
  selector: 'app-root',
  template: `
    <a href="#" appClick (click)="handleClick($event)">リンク</a>
  `
})
export class AppComponent {
  handleClick(event: MouseEvent) {
    console.log('リンクがクリックされました！');
  }
}