尝试呈现按钮控件时，Angular innerHTML 属性不起作用答案

【问题标题】：Angular innerHTML property not working while try to render button control尝试呈现按钮控件时，Angular innerHTML 属性不起作用
【发布时间】：2019-10-10 17:41:57
【问题描述】：

我在这里创建了 angular application.in，我想使用 [innerHTML] 属性注入一些内容，如下所示

export class AppComponent  {
  name = 'Angular';
  public bar = 'bars';
  foo = `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`;
}

我在下面的html文件中使用过这个

&lt;div [innerHTML]="foo"&gt;&lt;/div&gt;

但我只是简单地只返回 div 元素。按钮控件未呈现。

我创建了一个 stackb 示例供您参考。请提供任何想法如何做到这一点

样本 - https://stackblitz.com/edit/angular-ena2xj?file=src/app/app.component.ts

参考 - Angular HTML binding

【问题讨论】：

更好地使用 renderer2 服务：alligator.io/angular/using-renderer2
@Chellappan，嗨，兄弟，我们为什么不使用@viewChild？？
在 Angular 中操作 DOM 的更好方法是使用 Render2 服务。
@Chellappan，好的兄弟，我希望使用 Render2 服务可能也是一个很好的解决方案..
嗨@Chellappan，是否有任何指南可用于使用渲染 2 服务

标签： html css angular innerhtml

【解决方案1】：

你应该使用 DomSanitizer

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`);
}

【讨论】：

嗨@devraj，感谢您的快速回复。它工作正常
我还有一个疑问。可以创建另一个组件并在此处使用
这是不可能的。

【解决方案2】：

你可以把它改成@ViewChild，

像这样更改您的 ts 文件，

export class AppComponent  {
  @ViewChild('someVar') el:ElementRef;
  name = 'Angular';
  public bar = 'bar';
  ngAfterViewInit() {
  this.el.nativeElement.innerHTML = `<div>`+this.bar+`
  </div><button type="button" onclick="alert('Hello world!')">Click Me!</button>`;
}
}

Working Stackblitz https://stackblitz.com/edit/angular-vnk9ft

【讨论】：

哈哈好吧兄弟。我不想使用这种方法。还有一件事我也来自 karur
@kumaresan_sd，你为什么不想使用ViewChild ??
我不想引用元素，因为我必须在多个元素中注入它。
目前在syncfusion software pvt ltd chennai工作
@kumaresan_sd，好的，这个问题stackoverflow.com/questions/48879407/… 提出了两种解决方案，另一个答案涉及它的第一个解决方案。希望你能找到更好的解决方案。