Heim > Artikel > Web-Frontend > Wie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?
InnerHTML in Angular mithilfe der Ansichtskapselung formatieren
In Angular können Sie durch Festlegen der innerHTML-Eigenschaft HTML-Inhalte innerhalb der Ansicht einer Komponente dynamisch rendern. Beim Versuch, diesen eingefügten Inhalt zu formatieren, können jedoch Probleme auftreten.
Problem: Wenn innerHTML zum Einfügen von HTML-Inhalten verwendet wird, die Inline-Stile enthalten, werden die Stile möglicherweise nicht angewendet. Beispielsweise wendet der folgende Code den Hintergrundfarbenstil nicht auf das injizierte div-Element an:
<code class="typescript">this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';</code>
Lösung: Angular verwendet standardmäßig ein Konzept namens „emulierte“ Ansichtskapselung. Dadurch wird verhindert, dass innerhalb von Komponenten definierte Stile mit außerhalb von Komponenten definierten Stilen kollidieren. Um Inline-Stile für injizierte Inhalte zuzulassen, müssen Sie die Kapselung auf „Keine“ ändern.
<code class="typescript">@Component({ selector: 'example', styles: ['.demo {background-color: blue}'], template: '<div [innerHTML]="someHtmlCode"></div>', encapsulation: ViewEncapsulation.None, })</code>
Durch Festlegen der Kapselungseigenschaft auf „Keine“ verhindert Angular nicht mehr, dass Inline-Stile angewendet werden. Dadurch können Sie Stile sowohl im Styles-Array der Komponente als auch im eingefügten HTML-Inhalt definieren, und Angular wendet sie automatisch auf das DOM an.
Das obige ist der detaillierte Inhalt vonWie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!