如何將 fromEvent (Angular rxjs) 與多個元素一起使用？

Question

我有一個帶有多個具有特定 ID 的按鈕的角度應用程序。 他們每個人都有一個點擊功能，我想跟蹤用戶是否點擊了按鈕而不改變每個方法中的任何內容。

示例代碼：

  import { Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  
  

    @ViewChild('BUTTON_EDIT', {read: ElementRef}) BUTTON_EDIT;
      @ViewChild('BUTTON_ADD', {read: ElementRef}) BUTTON_ADD;
      ele: Element;
      
      ngAfterViewInit(): void {
        let clickStream;
    
        //check which element was pressed and get the id
        //how can i check it?

        clickStream = fromEvent(this.ele, 'clicked');
        var id = this.ele.id;
    
        clickStream.subscribe(event => {
          //send info
        });
      }
    }

Answer 1

為了偵聽多個事件，您可以使用merge ，它

將多個 observable 變成單個 observable

ngAfterViewInit(): void {
    merge(
        fromEvent(this.BUTTON_EDIT.nativeElement, 'click'),
        fromEvent(this.BUTTON_ADD.nativeElement, 'click'),
    ).subscribe((event: Event)=> {
      console.log(event.target.id);
    });
  }

還有一篇文章 - Create Observable from Event using FromEvent in Angular解釋了細節。

Web API 中的事件

對於發出的事件有 目標屬性，從那里你可以得到元素的 id，有一個小提琴https://jsfiddle.net/a907jf5g/

監聽點擊事件的角度方法

@Component({
  template: `
    <button (click)="add()">Add</button>
    <button (click)="edit()">Edit</button>
  `,
})
export class MyComponent {
  add() {
    // add clicked
  }

  edit() {
    // edit clicked
  }
}

Answer 2

Angular 允許您將多個方法綁定到一個點擊事件。 這意味着您可以綁定一個通用的“click”方法，該方法接受元素的 ID 並且不修改特定於該按鈕的事件處理程序方法，如下所示：

<button id="add-btn" #addBtn (click)="click(addBtn.id); add()">
  Add
</button>

<button id="edit-btn" #editBtn (click)="click(editBtn.id); edit()">
  Edit
</button>

click方法跟蹤所有按鈕的點擊，而add和edit方法是特定於每個按鈕的事件處理程序。

StackBlitz 示例