6

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. Açısal değişkenler temel alınarak dinamik css üretin 4

Ş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.

cevap

3

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> 
+0

kod çözümünü buraya göndermelisiniz. Lütfen css stili özelliklerinin içindeki değişken değerlerini nasıl kullandığınızı gösterir misiniz? –

+0

Bu çözümün bazı kod örneklerini gönderebilir misiniz? Bu gerçekten iyi bir çözüm gibi görünüyor. – Neutrino

+0

kodu güncelledi –

4

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

+0

iyi bir öneri Ajinkya Thats ama belirtildiği gibi onun büyük bir css olacak ve hemen hemen her eleman için geçerli olacaktır. Bu yüzden ngStyle –

+1

@Vikram kullanamazsınız, bunun için bir sorun zaten yayınlanmıştır [https://github.com/angular/angular/issues/7108](https://github.com/angular/angular/issues/7108 Bazı önerileriniz de var, bu sizin için yararlı olabilir –

2

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> 
2

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

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