Question

我正在尝试在运行时向它添加一个Button和事件。例如

  str1 = `
    <button type="button" (click)='alert1()'>Click Me!</button>
  `
  constructor(private sanitizer: DomSanitizer) { }

  safeStr() {
    return this.sanitizer.bypassSecurityTrustHtml(this.str1);
  }

  alert1() {
    alert('me')
  }

在模板:: <span [innerHTML]="safeStr()"></span>

中

按钮正在渲染，但点击事件无效。任何人都可以帮忙。

Answer 1

HTML由浏览器解释，这就是您看到按钮的原因。然而，JS是在编译时生成的。你应该做一些更简单的事情：如果不需要，隐藏按钮，代码如下：

<button *ngIf="isButtonDisplayed" type="button" (click)="alert1()">Click Me !</button>

在组件中，添加一个isButtonDisplayed布尔值，在运行时将其从false切换为true。

Answer 2

在我看来，你想要实现的只是显示按钮。在这种情况下，您应该使用*ngIf

喜欢这个

模板：

<button *ngIf="someBooleanCondition" type="button" (click)='alert1()'>Click Me!</button>

如果你真的需要在运行时注入模板，至少根据这篇文章，它仍然是可能的 - https://blog.thecodecampus.de/angular-2-dynamically-render-components/

然而，从外部服务加载按钮似乎是一个非常奇怪和复杂的场景。使用*ngIf和来自该服务的一些配置对象将更加容易。

Answer 3

Angular 2/4/5不会动态处理动态添加的HTML。Click事件无效。

在运行时Angular5添加Button和事件

3 个答案: