Wie wende ich Komponenten -CSS auf dynamisch injizierte HTML aus einer API an?
Posted: 25 Feb 2025, 08:40
Ich empfange eine HTML -Zeichenfolge aus einer API
[*] Verwenden Sie [Innerhtml] < /code>, aber die in der SCSS meiner Komponente definierten Stile sind nicht angewendet: < /p>
Verwenden von Domsanitizer , um Sicherheitsbeschränkungen zu umgehen:
, aber ich möchte vermeiden :: ng-deep da es veraltet ist. in meiner Komponente, aber das macht die Stile global, was ich nicht will. Kann ich das rendern? API-bereitgestellte HTML in meiner Komponente, während das Scoped CSS der Komponente angewendet wird?
[*] Verwenden Sie [Innerhtml] < /code>, aber die in der SCSS meiner Komponente definierten Stile sind nicht angewendet: < /p>
Code: Select all
< /code>
.content h3 {
color: red; // This does NOT apply
}
Code: Select all
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
htmlContent: SafeHtml;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(apiResponseHtml);
}
< /code>
Aber die Stile der Komponente gelten immer noch nicht. .Content H3 {Farbe: Rot; }