Actualmente estoy trabajando en una aplicación Angular2 con webpack y estoy tratando de configurar diferentes temas CSS según el usuario.
Por ejemplo: cuando el usuario se conecta, si es un niño, quiero que mis fondos sean azules, y si es una niña, quiero que los fondos sean rosas.
Simplemente cambiar el valor css con setAttribute o style.property no funcionará porque el DOM se destruye al cambiar de pestaña en la aplicación, debe ser algo permanente.
Intenté usar diferentes hojas de estilo css (1 para cada tema) y vincularlas a mi html con javascript cuando el usuario se conecta. El problema es que el paquete web siempre agrega automáticamente mi css a mi html al crear la aplicación.
Gracias por la ayuda.
En su css, haga una regla como:
.is-boy{ background: blue; } .is-girl{ background: pink; } y declare en su aplicación angular una variable de alcance como $scope.userSex = 'boy';
y en tu cuerpo usa ngClass así
<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ... Puede usar el selector :host-context para aplicar estilos a su componente en función del componente principal.
styles:[` :host-context(.parent1) div{ border: 1px solid blue; } :host-context(.parent2) div{ border: 1px solid blue; } `]Esto le permite aplicar estilos condicionalmente en función del selector que envuelve el componente.
editar:
Entonces, en su caso, su padre tendría un div con class .boy y un div con class .girl
Puede cargar estos que contienen divs con alguna bandera controlada por ngIf
Si desea ser un valor de clase de almacenamiento permanente en localStorage. Para configurar el tema, use ngClass con la variable establecida en el tema que necesita.