Как я могу установить прослушиватель щелчка только для кнопки в угловом приложении - PullRequest
Новая
       12

Как я могу установить прослушиватель щелчка только для кнопки в угловом приложении

0 голосов
/ 28 мая 2019

Я просто хочу внедрить в мое угловое приложение список событий (щелчков), который предназначен только для кнопки. кнопки будут создаваться динамически.

код выглядит так: 

  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;
    };
  }

это две функции, которые могут динамически создавать кнопки, и в конструкторе будет установлен список событий щелчка, но этот список предназначен для всех событий щелчка, вопрос в том, как установить этот список только для кнопок.

С наилучшими пожеланиями,

Leo

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

У меня был похожий requiremrnt, и я использовал 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. создать динамически из родительского компонента (передать свой идентификатор) 

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

при клике вы получите идентификатор кнопки. Измените это в соответствии с вашими требованиями

0 голосов
/ 28 мая 2019

Самый простой способ - сделать это через html, например, так: 

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

Вы должны реализовать myFunction() в своем файле JavaScript.

Другой способ - эточтобы найти эту кнопку в вашем файле JavaScript следующим образом: 

document.getElementById('button1')

и добавить прослушиватель событий.

...