Generowanie dynamicznego css w oparciu o zmienne kątowe 4

Question

Pracuję nad panelem administracyjnym opracowanym pod kątem 4 i próbuję zintegrować sekcje, aby dostosować styl, taki jak zmiana koloru, bg itp. Mam już opracowane sekcje do zapisywania ustawień w bazie danych dostałem je na obciążenie aplikacji jako json za pomocą interfejsu API.

Teraz próbuję wygenerować dynamicznego CSS korzystając z wartości json, próbowałem z następującego kodu w głównym składnikiem, ale jej nie działa

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

nie jestem pewien, w jaki sposób należy załadować wartości css w składniku i używaj ich w tagach stylu. Nie znalazłem żadnego innego rozwiązania dla tego samego.

Innym sposobem jest użycie koncepcji animacji kątowej, ale css ma być ogromny i nie można go w pełni zaimplementować za pomocą animacji kątowej za pomocą wyzwalaczy i wszystkich innych. Uważam, że istnieje na to rozwiązanie, ponieważ wydaje się, że jest to rzeczywisty wymóg i powinno być zrobione przez wielu innych programistów.

Każda pomoc jest dostrzegalna.

Edycja: nie można użyć ngStyle, ponieważ zostanie zastosowany do prawie wszystkich elementów jako do całej aplikacji, a nie tylko do konkretnego elementu.

Answer 1

Po przejściu przez różnych metod i zbliżył się, aby dodać dynamiczną css do wszystkich stronach kątowej aplikacji skończyło się z następujących rozwiązań.

Warunek: generowanie dynamicznego css na podstawie wartości zwróconych zi interfejsu API w celu zmiany projektu i stylizacji.

Rozwiązanie:

1. utworzyć nowy komponent i utworzyć usługę na obciążenie dynamiczne zmienne css z API.
2. Dodaj znacznik stylu w pliku szablonu i użyj wartości zmiennych dla właściwości.
3. Załaduj ten szablon na wszystkich stronach lub w szablonie głównym.
4. Styl kompilacji aplikacji zostanie przeniesiony do tagu head.

przykładowy kod

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

    } 
} 

szablon

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

Answer 2

możesz użyć ngStyle do dynastycznego dodawania css do twojej strony z json.

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

kolejny przykład samo można

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

Tutaj mam załadowany obraz tła z json

Answer 3

ngClass jest stosowanie ustawić klasy dynamicznej podstawę swojej wartości zmiennej jak poniżej

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 
    } 

Odwołanie od angular.io: https://angular.io/api/common/NgClass

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

Answer 4

Można wiążące tylko „style.color”

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