时间戳

首页 > 解决方案 > 如何将 fromEvent (Angular rxjs) 与多个元素一起使用？

angular - 如何将 fromEvent (Angular rxjs) 与多个元素一起使用？

问题描述

我有一个带有多个按钮的角度应用程序，这些按钮具有特定的 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
        });
      }
    }

标签： angulartypescript

解决方案

Angular 允许您将多个方法绑定到单击事件。这意味着您可以绑定一个常见的“单击”方法，该方法接受元素的 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方法跟踪所有按钮单击，而addandedit方法是特定于每个按钮的事件处理程序。

StackBlitz 示例

推荐阅读