Question

我只想在我的angular应用程序中实现一个事件（单击）列表器，该列表器仅用于按钮。按钮将动态创建。

代码如下：

  constructor(
    private companyService: CompanyService,
    elementRef: ElementRef,
    renderer: Renderer,
    private router: Router
  ) {
    renderer.listen(elementRef.nativeElement, "onclick", event => {
      // if (event.target.innerHTML) {
      //   this.searchByVin(event.target.innerHTML);
      // }
    });
  }


private setCustomValueFunction() {
    this.customValueFunction = (
      elemValue: string,
      elemKey: string,
      elem: {}
    ) => {
      if (elemKey === "vin") {
        elemValue = `<div class="gridster-item-content"><button (click)="searchByVin(${elemValue})">${elemValue}</button></div>`;
      }
      if (elemKey === "status") {
        elemValue = `
        <mat-icon>done</mat-icon>`;
      }
      return elemValue;
    };
  }

这2个可以动态创建按钮的函数，在构造函数中将设置一个click事件列表器，但是此列表器适用于所有click事件，问题是，如何仅为按钮设置此列表器。

最好的问候，

狮子座

Answer 1

最直接的方法是通过html进行操作，如下所示：

<button id="button1" (click)="myFunction()"> Button text </button>

您必须在JavaScript文件中实现myFunction()。

另一种方法是在javascript文件中找到该按钮，如下所示：

document.getElementById('button1')

并添加事件监听器。

Answer 2

我也有类似的要求，因此我使用Componetn实现了这一要求。尝试遵循此。 1.使用按钮创建组件

<div nxRow *ngIf="editMode">
<div nxCol="12,12,6">
  <button nxButton='secondary' (click)='save()'>save</button>
</div>
<div nxCol="12,12,6">
  <button nxButton='secondary' (click)='cancel()'>cancel</button>
</div>
</div>
<div nxRow *ngIf="!editMode">
<div nxCol="12,12,12">
<button nxButton='secondary' (click)='edit()'>edit</button>
</div>
</div>

TS：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
// tslint:disable-next-line: component-selector
selector: 'az-save-edit-button',
templateUrl: './save-edit-button.component.html',
styleUrls: ['./save-edit-button.component.css']
})
export class SaveEditButtonComponent implements OnInit {

@Input() divId = null;
@Output() btnClick = new EventEmitter();
editMode = false;

constructor() { }

ngOnInit() {
}

save() {
this.editMode = false;
this.btnClick.emit({divId: this.divId, action: 'save'});
}

edit() {
this.editMode = true;
this.btnClick.emit({divId: this.divId, action: 'edit'});
}

cancel() {
this.editMode = false;
this.btnClick.emit({divId: this.divId, action: 'cancel'});
}

}

2。从父组件动态创建（通过您的ID）

<az-save-edit-button [divId]="3" (btnClick)="functionCall($event)"></az-save-edit-button>

点击后，您将获得按钮ID。修改它以满足您的要求

如何在角度应用程序中仅为Button设置点击侦听器

2 个答案: