gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 08:19:31 25 4
gpt4 key购买 nike

我有一个 Angular 应用程序,其中包含多个具有特定 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
});
}
}

最佳答案

为了监听多个事件,您可以使用 merge ,其中

Turn multiple observables into a single 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 中的事件

对于发出的Eventtarget属性,从那里你可以获取元素的 id,有一个 fiddle https://jsfiddle.net/a907jf5g/

监听点击事件的 Angular 方法

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

edit() {
// edit clicked
}
}

关于angular - 我如何将 fromEvent (Angular rxjs) 与多个元素一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68301315/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com