web-dev-qa-db-fra.com

Propriété CSS Angular2 dynamic change

Nous faisons un application Angular2 et nous voulons pouvoir créer une variable CSS globale (et mettre à jour les valeurs des propriétés à chaque modification lorsque la variable est affectée).

Nous avions utilisé Polymer pendant un certain temps (nous passons maintenant aux composants Angular2) et nous avons utilisé les propriétés CSS (Polymer a un peu de polyfill) et nous venons de mettre à jour les styles en utilisant Polymer.updateStyles().

Existe-t-il un moyen de réaliser une fonction similaire?

EDIT:

Nous voulons quelque chose de similaire à Sass color: $g-main-color ou aux propriétés personnalisées CSS color: var(--g-main-color) et chaque fois que nous décidons de modifier la valeur de la propriété, par exemple. quelque chose comme updateVariable('g-main-color', '#112a4f') il met à jour dynamiquement la valeur partout. Tout cela pendant qu'une application est en cours d'exécution.

EDIT 2:

Je souhaite utiliser des variables CSS globales dans différentes parties (hôte, élément enfant ...) de mon CSS et pouvoir modifier la valeur immédiatement. Si je modifie la variable my-color, elle change partout dans l'application.

Je vais utiliser la syntaxe Sass par exemple:

:Host { border: 2px solid $my-color }
:Host .some-label { color: $my-color }

Est-il possible d'utiliser quelque chose comme Angular pipes? (mais cela ne fonctionne supposément qu'en HTML) 

:Host { border: 2px solid {{ 'my-color' | cssvariable }} }
:Host .some-label { color: {{ 'my-color' | cssvariable }} }
javascriptangulardartangular-dart
70
tenhobi

Il suffit d'utiliser des variables CSS standard:

Votre css global (par exemple: styles.css)

body {
  --my-var: #000
}

Dans le css de votre composant ou quoi que ce soit:

span {
  color: var(--my-var)
}

Ensuite, vous pouvez modifier la valeur de la variable directement avec TS/JS en définissant le style inline sur élément html:

document.querySelector("body").style.cssText = "--my-var: #000";

Sinon, vous pouvez utiliser jQuery pour cela:

$("body").css("--my-var", "#fff");
16
monkeythedev

1) Utilisation de styles en ligne

<div [style.color]="myDynamicColor">

2) Utilisez plusieurs classes CSS en correspondance avec ce que vous voulez et changez de classe, par exemple:

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

Exemples de code provenant de: https://angular.io/cheatsheet

Plus d'informations sur la directive ngClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

65
Gerard Sans

Vous n'avez pas d'exemple de code mais je suppose que vous voulez faire quelque chose comme ça?

@View({
directives: [NgClass],
styles: [`
    .${TodoModel.COMPLETED}  {
        text-decoration: line-through;
    }
    .${TodoModel.STARTED} {
        color: green;
    }
`],
template: `<div>
                <span [ng-class]="todo.status" >{{todo.title}}</span>
                <button (click)="todo.toggle()" >Toggle status</button>
            </div>`
})

Vous affectez ng-class à une variable dynamique (propriété du modèle appelée TodoModel, comme vous pouvez le deviner).

todo.toggle() change la valeur de todo.status et il en est de même pour la classe de l'entrée.

Ceci est un exemple pour le nom de la classe mais vous pouvez en fait faire de même pour les propriétés css.

J'espère que c'est ce que vous vouliez dire.

Cet exemple est pris pour le grand tutoriel egghead ici .

5
Shikloshi

J'ai fait ce plunker pour explorer une façon de faire ce que vous voulez.

Ici, je reçois mystyle du composant parent, mais vous pouvez l'obtenir d'un service.

import {Component, View} from 'angular2/angular2'

@Component({
  selector: '[my-person]',
  inputs: [
    'name',
    'mystyle: customstyle'
  ],
  Host: {
    '[style.backgroundColor]': 'mystyle.backgroundColor'
  }
})
@View({
  template: `My Person Component: {{ name }}`
})
export class Person {}
2
bertrandg