Wie wende ich Komponenten -CSS auf dynamisch injizierte HTML aus einer API an? ⇐ CSS

[Anonymous]

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>

Code: Select all

< /code>
.content h3 {
color: red; // This does NOT apply
}

Verwenden von Domsanitizer , um Sicherheitsbeschränkungen zu umgehen:

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; } 

, 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?