javascript - pasar - Propiedad CSS de cambio dinámico Angular2

pasar parametros entre componentes angular 4

Question

Estamos creando una aplicación Angular2 y queremos poder crear de alguna manera una variable CSS global (y actualizar los valores de las propiedades siempre que se modifiquen cuando se asigne la variable).

Habíamos usado Polymer por un tiempo (ahora estamos cambiando a componentes Angular2) y hemos usado propiedades CSS (Polymer tiene algunos polyfill) y acabamos de actualizar estilos usando Polymer.updateStyles() .

¿Hay alguna forma de lograr una función similar?

EDITAR:

Queremos algo similar al color: $g-main-color Sass color: $g-main-color o al color: var(--g-main-color) propiedades personalizadas CSS color: var(--g-main-color) y siempre que decidamos cambiar el valor de la propiedad, por ejemplo, algo como updateVariable(''g-main-color'', ''#112a4f'') actualiza dinámicamente el valor en todas partes. Todo eso mientras se ejecuta una aplicación.

EDITAR 2:

Quiero usar algunas variables CSS globales en diferentes partes (host, elemento hijo ...) de mi CSS y poder cambiar el valor de inmediato, por lo que si cambio la variable my-color, cambia en todas partes en la aplicación.

Usaré la sintaxis de Sass por ejemplo:

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

¿Es posible usar algo como tubos angulares? (Pero supuestamente solo funciona en HTML)

:host { border: 2px solid {{ ''my-color'' | cssvariable }} }
:host .some-label { color: {{ ''my-color'' | cssvariable }} }

Answer 1

1) Usar estilos en línea

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

2) Utilice el mapeo de clases CSS múltiples a lo que desea y cambie clases como:

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

Ejemplos de código de: https://angular.io/cheatsheet

Más información sobre la directiva ngClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Answer 2

Hice este saqueador para explorar una forma de hacer lo que quieres.

Aquí obtengo mystyle del componente padre pero puedes obtenerlo de un servicio.

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

Answer 3

No tiene ningún código de ejemplo, pero supongo que quiere hacer algo como esto.

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

Usted asigna ng-class a una variable que es dinámica (una propiedad de un modelo llamado TodoModel como puede adivinar).

todo.toggle() está cambiando el valor de todo.status y allí está cambiando la clase de la entrada.

Este es un ejemplo para el nombre de la clase, pero en realidad podría hacer lo mismo para las propiedades css.

Espero que esto sea lo que quisiste decir.

Este ejemplo se toma para el gran tutorial de egghead here .

Answer 4

IU angular 6 + Alyle

Con Alyle UI puedes cambiar los estilos dinámicamente

Aquí una demo stackblitz

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AlyleUIModule.forRoot(
      {
        name: ''myTheme'',
        primary: {
          default: ''#00bcd4''
        },
        accent: {
          default: ''#ff4081''
        },
        scheme: ''myCustomScheme'', // myCustomScheme from colorSchemes
        lightGreen: ''#8bc34a'',
        colorSchemes: {
          light: {
            myColor: ''teal'',
          },
          dark: {
            myColor: ''#FF923D''
          },
          myCustomScheme: {
            background: {
              primary: ''#dde4e6'',
            },
            text: {
              default: ''#fff''
            },
            myColor: ''#C362FF''
          }
        }
      }
    ),
    LyCommonModule, // for bg, color, raised and others
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML

<div [className]="classes.card">dynamic style</div>
<p color="myColor">myColor</p>
<p bg="myColor">myColor</p>

Para cambiar de estilo

import { Component } from ''@angular/core'';
import { LyTheme } from ''@alyle/ui'';

@Component({ ... })
export class AppComponent  {
  classes = {
    card: this.theme.setStyle(
      ''card'', // key
      () => (
        // style
        `background-color: ${this.theme.palette.myColor};` +
        `position: relative;` +
        `margin: 1em;` +
        `text-align: center;`
         ...
      )
    )
  }
  constructor(
    public theme: LyTheme
  ) { }

  changeScheme() {
    const scheme = this.theme.palette.scheme === ''light'' ?
    ''dark'' : this.theme.palette.scheme === ''dark'' ?
    ''myCustomScheme'' : ''light'';
    this.theme.setScheme(scheme);
  }
}

Repositorio Github

Answer 5

Solo use variables CSS estándar:

Su CSS global (por ejemplo: styles.css)

body {
  --my-var: #000
}

En el CSS de su componente o lo que sea:

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

Luego puede cambiar el valor de la variable directamente con TS / JS configurando el estilo en línea al elemento html:

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

De lo contrario, puede usar jQuery para ello:

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