Angular [innerHtml]: как визуализировать дополнительные элементы внутри элемента с помощью директивы [innerHtml]

Question

Элемент с директивой [innerHtml] просто добавляет объявленную html-строку внутри этого элемента, и ничего более;

до этого стекаблика , я пытался добавить что-то внутрьтакой элемент, безрезультатно;

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

Есть ли способ добавить еще немного HTML внутри элемента с помощью директивы [innerHtml]?Другими словами, как я могу заставить работать стек в примере?

Answer 1

вы можете попробовать с помощью 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 не рекомендуется.

вывод вышеуказанного кода

вы можете увидеть его добавление контента после, добавить сюда один за другим

Найти: Рабочая демонстрация

---

Вместо использования функции в вашем компоненте (она не работает, когда ваш 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>

Найти: Рабочая демоверсия

Answer 2

Как я понимаю ваш вопрос, использование внутреннего HTML заменяет внутренний HTML.Поэтому старое значение заменяется значением из вашего объекта.

Я понимаю, что вы следуете этому подходу, поскольку хотите отобразить значение из объекта.

Так что лучше использовать каналы,Может быть.Просто проверьте этот ответ.Если это поможет. Нажмите здесь

Answer 3

почему вы используете [innerHTML], поскольку ваш item.isi не является HTML-элементом;мы используем innerHTML для отображения результата html;например, если ваш item.isi равен <p>My name</p>;если это не html-элемент, бесполезно использовать innerHTML, вы можете просто использовать {{item.isi}} внутри вашего div, так что вы можете также визуализировать другие html-элементы