È possibile modificare dinamicamente i fogli di stile globali in Angular 2?

È possibile modificare dinamicamente i fogli di stile globali?È possibile modificare dinamicamente i fogli di stile globali in Angular 2?

MODIFICA: Lo scopo è consentire all'utente di scegliere gli stili che preferisce.

In Angular 1, sono stato in grado di avvolgere un controller attorno al tag head e utilizzare le associazioni.

esempio di seguito (codice semplificato):

index.html

<!DOCTYPE html> 
<html ng-app="app" ng-controller="AppController"> 
<head> 
    <title>Title</title> 
    <link rel="stylesheet" ng-href="styles/{{current}}"/> 
</head> 
...

AppController

app.controller('AppController', ['$scope', function ($scope) { 
    $scope.current = dynamicValue; 
}]);

Questo è possibile in angolare 2?

fonte

2016-06-09 Thibs

Avete provato? Quello che è successo? – Jamiec

Cosa stai cercando di ottenere cambiando dinamicamente il tag link? C'è probabilmente un modo diverso per ottenere la stessa funzionalità. :) – Harangue

Ho finito per utilizzare il token DOCUMENT come Igor menzionato here.

Da lì, sono stato in grado di scambiare lo href per lo stile.

HTML:

<head> 
    <link id="theme" rel="stylesheet" href="red.css"> 
</head>

TS:

import { Component, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 

@Component({}) 
export class MyClass { 
    constructor (@Inject(DOCUMENT) private document) { } 

    ngOnInit() { 
     this.document.getElementById('theme').setAttribute('href', 'blue.css'); 
    } 
}

fonte

2016-06-15 19:06:49 Thibs

No, non è possibile utilizzare alcun binding al di fuori delle applicazioni angolari. Le applicazioni angolari possono essere solo o all'interno di <body>. Quindi non c'è modo di farlo funzionare.

Si potrebbe dare un'occhiata all'implementazione di Title service per come accedere agli elementi in <head> o utilizzare semplicemente JS/TS per modificarlo imperativamente.

fonte

2016-06-09 16:24:23

prova questo: nel modello del componente radice include un collegamento a foglio di stile variabile.

@Component({ 
    selector: 'app', 
    template: ` 
    <link rel="stylesheet" href="styles/{{ current }}"> 
    ...` 
}) 
export class AppComponent { 
    current = 'site1.css'; 
}

fonte

2016-06-10 01:38:21 CurlyFro

È possibile modificare dinamicamente i fogli di stile globali in Angular 2?

risposta

Problemi correlati