zur Laufzeit in Angular 4

Question

Wenn ich eine Vorlage als solche haben:

<div [innerHTML]="html"></div> 

und in der Komponente:

public html = "<div class='title'>Title</div><p>etc. etc.</p>"; 
    public theme = { 
     title: { 
      styles: { 
      letterSpacing: '1px', 
      fontWeight: 'bold', 
      color: 'gray' 
     } 
     } 
    }; 

Wie kann ich die CSS in theme.title.styles auf die gerenderte HTML-Anwendung ?

Eine Idee, die ich hatte, ist die styles in den Metadaten der Komponente dynamisch zu definieren, aber ich weiß nicht, ob das möglich ist.

Answer 1

erklären Da Sie HTML verwenden, Sie können ngStyle nicht verwenden.

Von dort zwei Lösungen haben, aber Ihr Thema Objektstruktur gegeben, das lässt nur eine:

public html = `<div class="title" id="YouNeedACustomId">Title</div><p>etc. etc.</p>`; 
let el = document.getElementById('YouNeedACustomId'); 
for (let prop in theme.title.styles) { el.style[prop] = theme.title.styles[prop]; } 

Answer 2

Nun, ich denke Sie ngStyle

Versuchen Sie, diese Hoffnung verwenden können, es wird funktionieren :)

<div [ngStyle] ="getStyle()" [innerHTML]="html"></div> 

Und dann eine Funktion in der Komponente als

getStyle(){ 
    let styleObject = theme.title.styles;// or your style object howe so ever you want to define 
    return styleObject; 
}