Comment ajouter dynamiquement une feuille de style dans Angular 2?

Question

Existe-t-il un moyen d'ajouter dynamiquement l'URL de la feuille de style ou <style></style> dans Angular2? Par exemple, si ma variable est isModalOpened est true, je voudrais ajouter quelques CSS à quelques éléments en dehors de mon composant racine. Comme le body ou html.

Il est possible de le faire avec le DOM ou jQuery mais je voudrais le faire avec angulaire 2.

possible?

Merci

Answer 1

Je ne suis pas sûr que vous pouvez le faire à l'intégrité physique ou html, mais vous pouvez le faire au composant racine.

• Créer un service injecté au composant racine
• Que le service un état (peut être BehaviorSubject)
• Access service et changer l'état quand isModalOpened est changé
• Dans le composant racine, vous allez Observez ceci et modifiez les valeurs des paramètres de composant
• À l'intérieur du composant racine html, vous pouvez modifier les valeurs de classe en fonction des valeurs de paramètres de composant

Mise à jour: Définition de la couleur d'arrière-plan à partir d'un composant interne.

app.component.css

.red{ 
    background: red; 
} 

.white{ 
    background: white; 
} 
.green{ 
    background: green; 
} 

app.component.html

<div [ngClass]="backgroundColor" ></div> 

app.component.ts

constructor(private statusService: StatusService) { 
    this.subscription = this.statusService.getColor() 
    .subscribe(color => { this.backgroundColor = color; }); 
} 

status.service.ts

private color = new Subject<any>(); 
public setColor(newColor){ 
    this.color.next(newColor); 
} 
public getColor(){ 
    return this.color.asObservable(); 
} 

child.component.ts

export class ChildComponent { 
    constructor(private statusService: StatusService) {} 

    setColor(color:string){ 
     this.statusService.setColor(color); 
    } 
} 

Donc, chaque fois que nous appelons setColor et passer une variable couleur comme 'rouge', 'vert' ou 'blanc' l'arrière-plan du composant racine change en conséquence.

Answer 2

Mettez tout votre code html dans une directive personnalisée - appelons-le ngstyle ...

Ajouter votre ngstyle à votre page en utilisant les balises de directive, dans notre cas:

<ngstyle><ngstyle> 

, mais nous allons aussi ajouter la logique à votre directive en utilisant ng-si oui, vous pouvez activer ou désactiver ...

<ngstyle ng-if="!isModalOpened"><ngstyle> 

Maintenant, si votre « isModalOpened » est définie sur un champ dans votre contrôleur comme ceci:

$scope.isModalOpened = false; //or true, depends on what you need 

... vous pouvez l'activer vrai ou faux de différentes façons qui devrait basculer votre directive sur Et hors.

Answer 3

Vous pouvez créer une dynamique comme balise <style> ceci:

ngOnInit() { 
    const css = 'a {color: pink;}'; 
    const head = document.getElementsByTagName('head')[0]; 
    const style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.appendChild(document.createTextNode(css)); 
    head.appendChild(style); 
}