Как связать событие нажатия на динамически создаваемую кнопку в Angular 6?

Question

Я пытаюсь создать динамическую кнопку с событием onclick. Показанное имя () определило тот же Component.ts. Но ответа на нажатие кнопки

нет

Component.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

Было бы лучше создать кнопку с такими направлениями, как *ngFor или *ngIf, а не создавать элементы, как вы делаете с 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");
}

Answer 2

У вас не будет доступа к объекту документа везде.

Итак, вам не следует использовать 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 3

angular не компилирует динамически созданные элементы HTML. вам нужно использовать ng-template вот так:

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