Açısal değişkenler temel alınarak dinamik css üretin 4

Question

Açısal 4 ile geliştirilmiş bir yönetici panelinde çalışıyorum ve stilleri değiştirme rengi, bg vb. Gibi stilleri özelleştirmek için bölümleri birleştirmeye çalışıyorum. Veritabanındaki ayarları kaydetmek için zaten bir bölüm geliştirdim API kullanarak uygulama yükünü json olarak aldım.

Şimdi json değerleri kullanarak dinamik css üretmek çalışıyorum, ben bileşeninde css değerleri yük ne kadar emin değilim ana bileşende kodu aşağıdaki ancak onun

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

çalışmıyor ile çalıştı ve bunları stil etiketinde kullanın. Aynı şey için başka bir çözüm bulamadım.

Bir başka yol açısal animasyon konseptini kullanmaktır, ancak css büyük olacak ve tetikleyicileri ve tümünü kullanarak açısal animasyonu bütünüyle uygulayamayacaktır. Bunun gerçek bir gereklilik gibi göründüğü ve bir çok başka geliştiricinin yapmış olduğu bir çözüm olduğuna inanıyorum.

Herhangi bir yardımın önemi vardır.

Düzenleme: ngStyle'ı tüm uygulama için hemen hemen tüm öğelere uygulanacağı için kullanamazsınız, yalnızca belirli öğeler için değil.

Answer 1

bağlayıcı ve aşağıdaki çözümleri ile sona erdi açısal uygulaması üzerinde tüm sayfalara dinamik css eklemek yaklaştı olabilir.

Gereksinim: Tasarım ve şekillendirmeyi değiştirmek için döndürülen değerlere ve API'ye göre dinamik css oluşturun.

Çözüm:

1. yeni bir bileşen oluşturmak ve API dinamik css değişkenleri yüklemek için bir hizmet oluşturmak.
2. Şablon dosyasında stil etiketi ekleyin ve özellikler için değişken değerleri kullanın.
3. Bu şablonu tüm sayfalara veya ana şablona yükleyin.
4. Uygulama oluşturma stili kafa etiketine taşınır.

kod örneği

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 */ 

    } 
} 

şablon

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

Answer 2

ncStyle'ı kullanarak css'yi cson'dan json'a sayfanıza ekleyebilirsiniz.

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

bir aynı başka bir örnek

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

burada

i json arka plan resmini yüklediğiniz olabilir

Answer 3

ngClass

aşağıda gibi değişken değerinin dinamik sınıf esasları hazırlamak kullanımıdır

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'nun açıklaması: https://angular.io/api/common/NgClass

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

Answer 4

farklı yöntemlerle gittikten sonra "style.color" sadece

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