javascript - String olarak saklanan iç HTML nasıl düzenlenir ve render edilir?

Bir string türü değişkenden gelen bir HTML parçacığım var. Aşağıdaki ifadelerin bir string türü değişkende saklandığını düşünün,

displayContent =
    `<div>
        <img alt="image1" src="image1.jpeg"/>
    </div>
    <div>
        <p>Some random text</p>
        <img alt="image2" src="image2.jpeg"/>
        <p>Some random text again</p>
        <img alt="image3" src="image3.jpeg"/>
        <p>Some random text</p>
    </div>`

Şimdi, 'displayContent' string değişkenini bir HTML sayfasında görüntülemem gerekiyor; burada 'displayContent' HTML metni olarak render ediliyor.

Bunu kullandım: <span [innerHTML]='displayContent'> 'displayContent' değişkeninin HTML kodunu ana HTML sayfamın içinde çok güzel bir şekilde render etti.

Şimdi, belirli kaynaklardan gelen görüntüler sayfa boyutumdan daha büyük. Her <img /> öğesine <img style="max-width: 100%" /> gibi bir stil elementi eklemem gerekiyor.

Bunu başarmak için javascript dosyamızda basitçe bir replace() kullanabiliriz: displayContent=displayContent.replace(/<img/gi,'<img style="max-width: 100%" ')

Yani, yeni 'displayContent'imiz oluyor

`<div>
    <img style="max-width: 100%" alt="image1" src="image1.jpeg"/>
</div>
<div>
    <p>Some random text</p>
    <img style="max-width: 100%" alt="image2" src="image2.jpeg"/>
    <p>Some random text again</p>
    <img style="max-width: 100%" alt="image3" src="image3.jpeg"/>
    <p>Some random text</p>
</div>`

Şimdi, bu güncellenmiş değişkeni <span [innerHTML]='displayContent'> kullanarak render ettiğimde, bu herhangi bir şekilde resimlerimi ölçeklendirmiyor. Resimler hâlâ orijinal boyutlarında.

Ayrıca tarayıcının geliştirici araçlarındaki Görüntü Stilleri özelliğinde bir güncelleme yok. Geliştirici araçları Stilleri görmek için buraya tıklayın

Cevap #1

Belki burada bir çözüm buldum.

Stili uygulamak için HTML'i temizlememiz gerektiğini söylüyor.

Yeni bir boru oluştur:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Pipelinizi deklarasyonlar altında modülünüze eklemeyi unutmayın

@NgModule({
  declarations: [
    ...
    SafeHtmlPipe,
],

İçe aktarın ve kullanın:

<span [innerHTML]="displayContent | safeHtml">

Cevap #2

[innerHTML]'yi DomSanitizer kullanarak SafeHtml'e bağlamalısınız.

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

@Component({
  selector: 'my-app',
  template: `
   <div [style.width.px]="300">
     <div [innerHtml]="safeHTML"></div>
   </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  html = '<img src="https://via.placeholder.com/1000x1000" style="max-width: 100%" />';

  get safeHTML(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.html);
  }

  constructor(private sanitizer: DomSanitizer) { }
}

Canlı demo