如何在 Angular 6 中动态创建的按钮上绑定点击事件？

Question

我正在尝试创建一个带有 onclick 事件的动态按钮。 showname() 在同一个 Component.ts 上定义。 但是点击按钮没有反应

组件.ts

createtooltip() {
  this.tooltip = document.createElement('div');
  this.tooltip.style.cssText =
    'position:absolute; background:black; color:white; padding:4px;z-index:10000;' +
    'border-radius:2px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);' +
    'opacity:0;transition:opacity 0.3s';
  this.tooltip.innerHTML = '<button id="popup" (click)="showname()" >Copy!</button>';
  document.body.appendChild(this.tooltip);
}

showname() {
  console.log("Hi User");
}

谁能帮我找到解决方案？

Answer 1

您将无法在任何地方访问文档对象。

因此，您不应该使用document函数来进行 DOM 操作。 所有这些 DOM 操作应该只使用 Rendere2 来完成。 如果您想在 DOM 上访问任何内容，您应该使用@ViewChild

这是一个例子：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  @ViewChild('tooltip') tooltip: ElementRef;

  constructor(private renderer: Renderer2) {}

  createtooltip() {
    this.renderer.setAttribute(this.tooltip.nativeElement, 'class', 'my-button');

    const button = this.renderer.createElement('button');
    this.renderer.setProperty(button, 'id', 'popup');
    this.renderer.setProperty(button, 'innerText', 'Copy');
    this.renderer.listen(button, 'click', (event) => {
      this.showname();
    })

    this.renderer.appendChild(this.tooltip.nativeElement, button);
  }

  showname() {
    console.log("Hi User");
  }

}

在模板中：

<button (click)="createtooltip()">Create Tooltip</button>

<div #tooltip>

</div>

在 CSS 中：

p {
  font-family: Lato;
}

.my-button {
  position:absolute;
  background:black;
  color:white;
  padding:4px;
  z-index:10000;
  border-radius:2px;
  font-size:12px;
  box-shadow:3px 3px 3px rgba(0,0,0,.4);
  opacity:0;
  transition:opacity 1s linear;
}

这是一个示例 StackBlitz供您参考。

Answer 2

我用另一种方式解决了这个问题

<a ngFor="let link of links" (click)="actions[link]()">Click</a>

` 动作：任何 = {

link1: () => this.func1(),
link2: () => this.func2()

}`

Answer 3

angular 不会编译动态创建的 HTML 元素。 你必须像这样使用ng-template ：

<ng-template #myTemplate>
    <div styles="...">
       <button id="popup" (click)="showname()" >Copy!</button>
    </div>
</ng-template>

Answer 4

最好使用像*ngFor或*ngIf这样的*ngFor创建按钮，而不是像使用Jquery那样创建元素。

这是由于 Angular 的性质，它优先考虑并简化指令的使用，而不是简单的 javascript。

要做到这一点，你可以：

HTML :

<button id="popup" (click)="showname()" *ngIf='elements.showNameButton==true' >Copy!</button>

** TS :**

elements={
 showNameButton:false
}

createtooltip(){
 this.elements.showNameButton =true;
}

showname() {
  console.log("Hi User");
}