J'ai une question à propos de .. Comment pouvons-nous convertir la déclaration ci-dessous sur le rendu angulaire2?
this.elementRef.nativeElement.style.setProperty( '--primary-color ' , '#455363' )
3 Réponses :
Je pense que vous recherchez quelque chose dans ces lignes:
constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
ngOnInit() {
this.renderer.setStyle(
this.elementRef.nativeElement,
'--primary-color',
'#455363'
);
}
Êtes-vous sûr que cela fonctionnera? Depuis que Stetstyle () ne reconnaît pas - Couleur primaire CSS variable.
Je ne suis pas sûr, non, je n'ai pas essayé d'ajouter des styles de cette façon, mais cela jette une erreur?
- Couleur primaire n'est pas une propriété CSS appropriée si angulaire n'ajoutera aucun style à l'aide de Setstyle () .
Checkout Mes résultats Réponse sur SetStyle () , nous devons passer le quatrième paramètre pour accéder à CSS-variable avec - style.
Excellente découverte! Ont suscité votre réponse, supprimerez la mienne dans quelques heures afin que vous puissiez voir ce message d'abord ^^
Comme je suis passé plus de détails sur setstyle () code> de renduer2 code> Il y a un total de quatre paramètres que nous pouvons transmettre. `this.renderer.setStyle(this.elementRef.nativeElement, `--primary-color`, '#455363' , 2 )`
De votre question, je suppose que vous souhaitez activer le thème, voici une solution qui n'est pas liée directement à votre question, mais vous donne une meilleure idée de la manière dont cela pourrait être élaboré
<!-- scoped to the body-->
<bod class="theme1">
<div>
<component1> </component1>
</div>
<div>
<component1> </component1>
</div>
</body>
<!-- scoped to parent div -->
<bod >
<div class="theme1">
<component1> </component1>
</div>
<div class="theme2">
<component1> </component1>
</div>
</body>
<!-- scoped to the component and mix and match -->
<bod class="theme1">
<div>
<component1> </component1>
</div>
<div>
<component1 class="theme2"> </component1>
</div>
</body>
Juste une suggestion, ne changez pas les variables CSS avec angular. Définir le style et modifier le nom de style. Il est plus facile de styler le composant. Vous pouvez même activer le thème. Ceci n'est pas considéré comme une bonne approche
@Mohrada Pouvez-vous donner un exemple de lien sur la thème? Et pouvez-vous fournir plus de détails sur la manière dont il n'est pas une bonne pratique de changer les variables CSS avec angular?
Vérifiez akveo.github.io/nebulaire / Docs / Système de conception / ... Tout est fait par mixin et fonctions et un seul service
@MOHRADA Merci pour votre suggestion !! Ce que je vais réaliser, c'est un peu comme cette approche similaire mais différente. Vous pouvez consulter ma petite implémentation dans ce lien Stackblitz.com/edit/...
@Mohrada dans mon chemin J'utilise la directive. Nous pouvons placer cette directive en tant que wrapper parent. Un service pour le changement thématique. Et laissez l'utilisateur décidera comment ils utilisent cette directive et cette service. Ce qu'il faut faire, c'est d'abord, définir leur propre jeu de couleurs variables, puis ils doivent passer cette palette de couleurs à la méthode de service
Changetheme () .Achetez pourquoi ils doivent le faire quand ils peuvent le faire facilement avec CSS? La directive n'est pas trop ingénieur? et même votre directive pourrait appliquer un CSS supplémentaire à l'élément