Angular [innerHtml]：如何使用[innerHtml]指令在元素内呈现其他元素

Question

带有[innerHtml]指令的元素似乎只是在该元素中添加声明的html字符串，仅此而已;

通过this stackblitz，我试图在这样的元素中添加一些内容，但无济于事;

<div [innerHTML]="safeHtml(item.isi)"><p>new word - will not show</p></div>

有没有办法在[innerHtml]指令的元素中添加更多HTML？换句话说，如何使示例中的stackblitz工作？

Answer 1

为什么你使用[innerHTML]，因为你的item.isi不是一个html元素;我们使用innerHTML来渲染一个html结果;比如你的item.isi是<p>My name</p>;如果它不是一个没有使用innerHTML的html元素，你只需在你的div中使用{{item.isi}}，这样你就可以渲染其他html元素了

Answer 2

您可以尝试使用ElementRef，如果您想要追加元素而不想替换完整的html，

html

<div #Container>
    add here 
 </div> 

ts文件

export class AppComponent implements AfterViewInit  {
  @ViewChild('Container') container: ElementRef ;

  content = [
   {judul: "Judul 1", isi:"<div id='title_1'>Isinya</div>"},
   {judul: "Judul 2", isi:"<div id='title_2'>pranay</div>"},
  ];

  ngAfterViewInit() { 
   this.content.forEach( (item,index) =>{
      this.container.nativeElement.insertAdjacentHTML('beforeend', `<div id="title${index}">${item.judul}</div>`);
this.container.nativeElement.insertAdjacentHTML('beforeend', `${item.isi}`);

   });
}

但是不推荐使用elementref方式。

上述代码的输出

你可以看到它之后添加内容，逐个添加

查找：Working Demo

不是在组件中使用函数（它不能作为你的html模板试图将html传递给你的typscript文件），你应该创建如下管道

html.pipe.ts

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'html'
})
export class HtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

并像

一样使用它

html

<div *ngFor="let item of content">
 <h3 [innerHTML]="item.judul | html ">add</h3>
 <div [innerHTML]="item.isi | html "><p>new word</p></div>
</div>

查找：Working Demo

Answer 3

据我了解你的问题，使用内部html取代了内部html。因此，旧值将替换为对象中的值。

我知道您正在关注此approch，因为您想要显示对象的值。

所以更好的方法是使用管道。也许。 请检查这个答案。如果它有帮助。 Click here