innerHTML不适用于某些标签，如按钮或自定义标签 [英] innerHTML is not working for some tags like button or custom tags

问题描述

当我通过角度插值分配一些html标记（如按钮）或自定义标记时，插值出现问题，然后它不显示

在component.html文件

< div [innerHTML] =html>< / div> p>

在component.ts文件中

html =< ; h1> Header< / h1>< button>按钮< / button>

不能在角度
https://stackblitz.com/edit/angular- j5gsb4？embed = 1& file = app / app.component.ts

它使用纯html / js
https://plnkr.co/edit/3PWexJjKbOEe50egKjqJ?p=preview

解决方案

innerHTML 不是作为HTML元素属性公开的属性。

 < div [innerHTML] =html>< / div> 
  

所以这是行不通的。

您可以使用 @ViewChild 访问DOM元素

app.component.html

 < div＃someVar>< / div> 
  

app.component.ts

 从'@ angular / core'导入{ElementRef}; 
 @ViewChild（'someVar'）el：ElementRef; 
 
构造函数（）{} 
 
 ngAfterViewInit（）{
 this.el.nativeElement.innerHTML =some html; 
} 
  

Problem in interpolation when I assign some html tags(like button) or custom tag by angular interpolation then its not showing

In component.html file

<div [innerHTML]="html"></div>

In component.ts file

html = "<h1>Header</h1> <button>Button</button>"

Not working in angular https://stackblitz.com/edit/angular-j5gsb4?embed=1&file=app/app.component.ts

It's working in pure html/js https://plnkr.co/edit/3PWexJjKbOEe50egKjqJ?p=preview

解决方案

innerHTML is not a attribute exposed as a property of HTML Element.

<div [innerHTML]="html"></div>

So this will not work.

You can use @ViewChild to access DOM Element

app.component.html

<div #someVar></div>

app.component.ts

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor() {}

ngAfterViewInit() {
      this.el.nativeElement.innerHTML = "some html";
}

这篇关于innerHTML不适用于某些标签，如按钮或自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！