1. ホーム
  2. html

[解決済み] Angularコンポーネント外でのクリックを検出する

2022-05-01 09:20:34

質問

クリックを検出する方法 外側 コンポーネントを作成できますか?

解決方法は?

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

@Component({
  selector: 'selector',
  template: `
    <div>
      {{text}}
    </div>
  `
})
export class AnotherComponent {
  public text: String;

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.text = "clicked inside";
    } else {
      this.text = "clicked outside";
    }
  }

  constructor(private eRef: ElementRef) {
    this.text = 'no clicks yet';
  }
}

動作例 - ここをクリック