1
votes

Angulaire: la modification de la taille de la police à l'aide de variables css s'applique mais ne se reflète pas dans le navigateur pour certains champs

J'utilise des variables CSS pour une fonctionnalité où l'utilisateur a la possibilité de changer la taille de la police en petite, moyenne ou grande. Donc, pour la plupart des domaines, cela fonctionne comme prévu. Mais pour certains champs, la valeur est appliquée mais pas reflétée

refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string) {
        this.defaultFontSize = selector;
        let docBody = document.body;
        console.log(document.getElementById(selector));
        docBody.classList.add(selector);
        this.refClassArray.forEach((refClass: RefClassInterface) => {
            if (selector !== refClass.refClass) {
                docBody.classList.remove(refClass.refClass);
                document.querySelector('#' + refClass.refClass).setAttribute('style', 'font-weight: normal;' + 'pointer-events: auto;');
            } else {
                document.querySelector('#' + refClass.refClass).setAttribute('style', 'font-weight:' + 'bold;' + 'pointer-events: none;');
            }
        });
        this.ieStyles.iEfont(selector);
    }

:host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

Ci-dessus, la logique que j'utilise.

La première photo provient de l'élément qui fonctionne correctement. Lorsque je passe la --font-size sur --font-size , 11px est reflété. Le second est celui où cela ne fonctionne pas comme prévu et lorsque je survole la --font-size rien n'apparaît. Et ces deux éléments sont à l'intérieur de <body>

typescript angular html css css-variables

1 commentaires

Est-il possible de reproduire ce problème dans stackblitz par hasard?

4 Réponses :

1
votes

Vous ne devez pas modifier votre code html via un accès direct. Cela peut ouvrir votre application à la vulnérabilité des attaques XSS, par exemple.

Au lieu de cela, l'équipe angulaire recommande l'utilisation du Renderer2 .

Prendre votre code et le modifier pour l'utiliser, conduirait à ce qui suit:

refClassArray: RefClassInterface[] = [
        { class: 'font-small', refClass: 'smallFont' },
        { class: 'font-medium', refClass: 'mediumFont' },
        { class: 'font-large', refClass: 'largeFont' },
    ];
defaultFontSize = 'mediumFont';

changeFontSize(selector: string, indexOfClassToAdd: number) {
  this.defaultFontSize = selector;
  const el: Element = document.getElementById(selector));
  // Iterate each class in the list to remove it.
  this.refClassArray.forEach((refClass: RefClassInterface) => {
    // Remove the class from the specific element only if its present.            
    if (el.classList.contains(refClass.refClass) {
      this.renderer2.removeClass(el, refClass.refClass);
    };
  });
  this.renderer2.addClass(el, refClassArray[indexOfClassToAdd].refClass);
};

Cela impliquerait que vous soyez conscient de la class à appliquer (et qu'elle est présente dans le style.scss ou et dans le fichier scss approprié).

Sincères amitiés.

0 commentaires

0
votes

Par curiosité, pourquoi le faites-vous de cette façon plutôt que d'utiliser simplement une classe avec la taille de texte souhaitée?

Dans tous les cas, il semble que votre valeur ne soit pas appliquée car votre sélecteur n'est pas assez spécifique.

Pour corriger cela, vous pouvez créer un sélecteur artificiellement spécifique avec quelque chose comme ceci:

html > body * { // rules }

1 commentaires

Je fais de cette façon parce que j'ai un menu, un en-tête, un écran (où les données sont affichées et un changement de police est nécessaire) et un pied de page. Et l'exigence est de changer la taille des polices affichant les données. L'en-tête du tableau, le titre de la section, etc. ne doivent pas être modifiés.

0
votes

Pourquoi ne pas utiliser ngClass ? Définissez trois classes

ngClass = "{
 'font-small': userChoice === sizeEnum.small,
 'font-medium': userChoice === sizeEnum.medium,
 'font-large': userChoice === sizeEnum.large
}"

Liez quelque chose à l'utilisateur select, comme userChoice: SizeEnum ou quelque chose

Ensuite, sur votre élément de données, utilisez ngClass pour lier

.font-small{
    fontSize: 10px
}
.font-medium{
    fontSize: 11px
}
.font-large{
    fontSize: 12px
}

0 commentaires

0
votes

Le problème a été résolu en déplaçant

:host-context(.mediumFont) {
    --fontSize: 11px;
}
:host-context(.largeFont) {
    --fontSize: 12px;
}
:host-context(.smallFont) {
    --fontSize: 10px;
}

de app.component.scss à styles.scss . Étant donné que les fenêtres contextuelles ne font pas partie de app.compontnet.html elles app.compontnet.html extérieur.

0 commentaires