生成動態CSS 4

我的工作與角4開發的管理面板上，並試圖整合部分定製造型樣改變顏色，BG等我已經開發了部分保存在數據庫設置使用API將它們作爲json加載應用程序。生成動態CSS 4

現在我試圖使用從JSON值動態CSS，我與主要成分下面的代碼，但它不工作

@Component({ 
     templateUrl: 'card.html', 
     styles: [` 
     .card { 
      height: 70px; 
      width: 100px; 
      color: {{css.cardColor}}; 
     } 
     `], 
})

試過我不知道我應該如何在組件加載CSS值並在樣式標籤中使用它們。我沒有找到任何其他解決方案相同。

另一種方法是使用角動畫的概念，但CSS將是巨大的，它不可能通過使用觸發器和所有角動畫來實現它。我相信有一個解決方案，因爲它似乎是一個真正的需求，應該由許多其他開發人員完成。

任何幫助是可觀的。

編輯：不能使用ngStyle，因爲它將被應用於幾乎所有的元素，因爲它的整個應用程序，而不僅僅是特定的元素。

來源

2017-09-05 Vikram Singh

通過不同的方法去後，接近動態CSS增加對角應用程序，我結束了以下解決方案的所有網頁。

要求：基於來自與API返回改變設計和造型值生成動態CSS。

解決方案：

創建一個新的組件和創建服務從API加載動態的CSS變量。在模板文件
添加樣式標籤和使用的變量值的屬性。
在所有頁面或主模板上加載此模板。
在應用程序構建樣式將被移動到頭標籤。

代碼示例

import { CssService} from './Css.service'; 

@Component({ 
    selector: 'DynamicCss', 
    templateUrl: './DynamicCss.component.html', 
    styleUrls: ['./DynamicCss.component.scss'] 
}) 
export class ServiceProviderComponent implements OnInit { 
    cssVariables: any; 
    constructor(private cssService:CssService){ 
     /* call the service/api to get the css variable values in cssVariables */ 

    } 
}

模板

<style> 
.css_class{ 
    background: {{cssVariables.bgcolor}}; 
    color: {{cssVariables.fontcolor}}; 
} 
</style>

來源

2017-10-03 02:47:55

您應該在此處發佈代碼解決方案。你能告訴我們如何使用CSS樣式屬性中的變量值嗎？ –

你能發表一些這個解決方案的代碼示例嗎？這看起來是一個非常好的解決方案。 – Neutrino

更新了代碼 –

你可以使用ngStyle以dyanaically的方式將css添加到json的頁面。

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>

An的相同另一示例可以是

<div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover' }"></div>

在這裏，我已經從JSON加載背景圖像

來源

2017-09-05 05:28:16

那是一個很好的建議，但Ajinkya正如我所提到它的將是一個巨大的CSS和將被應用到幾乎每一個元素。所以不能使用ngStyle –

@Vikram，這個問題已經提交[https://github.com/angular/angular/issues/7108](https://github.com/angular/angular/issues/7108 ）也有一些建議，這可能對您有所幫助 –

ngClass是使用來設置變量值的動態類基礎如下

Ts File Component 
    @Component ({ 
      selector:'simple-comp', 
      template:` <ol class="breadcrumb"> 
     <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li> 
     <li *ngClass="{'active': step==='step2'}" (click)="step='step2'">Step2</li> 
     <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li> 
     </ol>` 
     }) 
    export class SimpleComponent { 
    public step: string = 'step1'; // change value like step1, step2, step3 
    }

參考angular.io：https://angular.io/api/common/NgClass

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

來源

2017-09-05 05:37:29

只能綁定「style.color」

<div class="card" [style.color]=cardColor>lorem ipsum</div>

來源

2017-09-05 06:37:05 Eliseo

回答

相關問題