Создание динамического css на основе переменных angular

Я работаю над панелью администратора, разработанной с помощью angular 4, и пытаюсь интегрировать разделы для настройки стиля, например изменения цвета, bg и т.д. Я уже разработал разделы для сохранения настроек в базе данных, которые получили их при загрузке приложения как json, используя API.

Теперь я пытаюсь создать динамический css, используя значения из json, я пробовал со следующим кодом в основном компоненте, но его не работал

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

Я не уверен, как мне загрузить значения css в компонент и использовать их в теге стиля. Я не нашел другого решения для этого.

Другой способ - использовать концепцию анимации angular, но css будет огромным, и его невозможно реализовать с анимацией angular с помощью триггеров и всех. Я считаю, что для этого есть решение, поскольку оно кажется подлинным требованиям и должно было быть сделано многими другими разработчиками.

Любая помощь заметна.

Edit: не может использовать ngStyle, поскольку он будет применяться почти ко всем элементам как к целому приложению, а не только к определенному элементу.

Ответы

Ответ 1

Пройдя через разные методы и приблизившись к добавлению динамических CSS на все страницы в угловом приложении, я нашел следующие решения.

Требование: генерировать динамический CSS на основе значений, возвращаемых из API и API, для изменения дизайна и стиля.

Решение:

  1. создайте новый компонент и создайте сервис для загрузки динамических переменных CSS из API.
  2. Добавьте тег стиля в файл шаблона и используйте значения переменных для свойств.
  3. Загрузите этот шаблон на все страницы или на основной шаблон.
  4. При сборке приложения стиль будет перенесен в заголовок тега.

Пример кода

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

    }
}

Теперь примените CSS, используя jquery или javascript, чтобы добавить CSS с помощью функции, подобной следующей

appendCss(customData)
{
     let text = '.custom-form-1 {
            background-image: url("'+customData.background_image+'");
         }';
     $(document).ready(function(){
         $("style").append(text);
      });
}

и вызвать эту функцию после загрузки пользовательских данных из службы или другой переменной, как я это сделал ngOnInit

ngOnInit(){
 this.appendCss(this.customizeFormData);
}

Он использует jquery, но может быть выполнен и с помощью javascript/typescript, если вы не хотите использовать jquery в своем угловом приложении

Другой полезный ресурс https://github.com/angular/angular/issues/9343#issuecomment-312035896

Ответ 2

вы можете использовать ngStyle для dyanaically добавления css на вашу страницу из json.

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

Другим примером такого же может быть

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

здесь я загрузил фоновое изображение из json

Ответ 3

Вы можете связать только style.color:

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

Ответ 4

ngClass используется для установки динамического класса на основе значения вашей переменной, как ngClass ниже

Ts Файловый компонент:

@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
}

HTML-код:

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

Ответ 5

Mi solución fue

<div [ngStyle]="{ 'background-image':'url(' + (user|async).urlfondo +')', 'background-repeat': 'no-repeat', 'background-size': '100vw 67vh' }"></div>

No se puede usar {{}} para colocar la variable user

Ответ 6

Я не говорю, что это применимо, но библиотека angular/flex-layout делает много манипуляций со стилями. Изучение исходного кода может помочь вам дать некоторые идеи.

Не забудьте использовать в своих интересах директивы, услуги/внедрение зависимости.

Например, вот несколько полезных классов в библиотеке flex-layout, которые могут быть полезны:

StyleUtils, StyleDirective, MatchMedia (динамически создавать тег таблицы стилей)