Angular2動態樣式表元素

我從JSON中的beehance API加載了一些內容，其中包含一些文本和樣式信息，使其看起來像它在編輯器中配置的樣子。Angular2動態樣式表元素

包含在JSON文本具有HTML標籤和我一起[innerHTML的]

{ 
    text: '<div class="sub-title">Lorem ipsum</div> <div class="paragraph">dolor sit amet</div>', 
    ... 
}

添加它和款式都是類似

"paragraph": { 
    "color": "#3B3B3B", 
    "font_family": "arial,helvetica,sans-serif", 
    "font_size": "12px", 
    "line_height": "1.4em", 
    "text_align": "left" 
}, 
"subtitle": { 
    "color": "#000000", 
    "font_family": "arial,helvetica,sans-serif", 
    "font_size": "14px", 
    "line_height": "1.6em", 
    "text_align": "right" 
}

那麼有沒有一種Angular2辦法，我可以追加一些生成的CSS到<style>元素？
我試着用模板內的樣式標籤，但我不知道如何插入。

樣式元數據不起作用，因爲樣式是動態獲取的，並且它們因項目而異。

我想是這樣的：

@Component({ 
    template: ` 
    <style> 
    .paragraph { 
     {{styles.paragraph}} 
    } 
    </style> 
    ` 
})

但插不工作，有沒有辦法做這樣的事情？

來源

2016-07-15 Sebastián Gaviria

您可以直接添加動態風格的元素

{ 
    text: '<div class="sub-title">Lorem ipsum</div> <div class="paragraph" [ngStyle]="styles.paragraph">dolor sit amet</div>', 
    ... 
}

，但目前還沒有辦法在風格本身使用綁定。

相關問題

來源

2016-07-17 15:59:59

我不能使用ngStyle，除非我使用一些算法來搜索該字符串中的類，並添加指令，如果我這樣做，它會工作，當我把結果字符串放入innerHTML指令？我認爲我正在尋找的是類似於我看到的問題2567 –

。我錯過了innerHTML部分。 Can'r您只需將樣式內聯添加到您添加的HTML。否則，我不認爲Angular2提供了任何東西。 –

我發現這個解決方案（這是主要的黑客攻擊，但它的工作原理）：

的src/index.html

<!doctype html> 
<html> 
    <head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.png"> 
    </head> 
    <body> 
    <style id="theme_styles"></style> 
    <app-root></app-root> 
    </body> 
</html>

SRC /應用/ style1.css.ts

export const style1 = ` 
    body { 
    background: red; 
    } 
`;

SRC /應用/ style2.css.ts

export const style2 = ` 
    body { 
    background: blue; 
    } 
`;

的src /應用程序/應用程序/component.ts

import { Component } from '@angular/core'; 
import { style1 } from './style1.css'; 
import { style2 } from './style2.css'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    private themeElement: Element = document.getElementById('theme_styles'); 
    private isStyle1: boolean = false; 

    constructor() { 
    this.themeElement.innerHTML = style1; 
    } 

    ngOnInit() { 
    if (this.isStyle1) { 
     this.themeElement.innerHTML = style1; 
    } else { 
     this.themeElement.innerHTML = style2; 
    } 
    } 
}

來源

2017-07-23 13:20:03 Mike

Angular2動態樣式表元素

回答

相關問題