1
votes

Comment changer un style particulier dans un composant angulaire qui a un sélecteur d'un autre composant

J'ai 5 composants tous ont le même pied de page

<app-footer style="margin-top: 0"></app-footer>

Dans le composant de pied de page, il y a une ligne de code

footer { margin-top: 0 !important }

En tout les 4 composants cela fonctionne très bien. Mais dans le 5ème composant où j'utilise le pied de page je n'ai pas besoin du haut de la marge.

Donc, dans le 5ème composant, j'ai essayé

footer {
margin-top: 80px;
}

<app-footer></app-footer>

Mais cela ne fonctionne pas.

angular

1 commentaires

utilisez class au lieu de style si vous voulez utiliser alors le code correct serait

3 Réponses :

1
votes

Utilisez: pseudo-classe hôte,

Essayez ceci:

footer.component.css
<app-footer class="withoutpadding"></app-footer>
<app-footer ></app-footer>
app.component.html
:host(.withoutpadding) .footer{
 color:red;
 padding: 0px;
}

.footer{
  padding: 10px;
  border:1px solid red;
}
Exemple

ForMoreInfo

0 commentaires

0
votes

L'ajout de style = "margin-top: 0;" ne fonctionnera pas car vous attribuez au composant app-footer un code margin-top > tandis que la balise footer dans le composant contiendra toujours le style margin-top: 80px; . Vous pouvez passer une vérification au composant app-footer et ajouter conditionnellement le margin-top: 80px; style

composant parent p>

.margin-top {
    margin-top: 80px;
}

   app-footer.component.ts  
 <footer [ngClass]="{'margin-top': showMargin}">
    // ...
</footer>
   app.footer.component .html  
 @Input showMargin: boolean;
   app.component.css  
 <app-footer [showMargin]="true"></app-footer>

0 commentaires

0
votes

Essayez-le comme ceci

<hello [ngStyle]="{overflow: 'scroll', color:'red',margin:80 +'px'}"></hello>

0 commentaires