J'essaye d'accéder et de modifier la classe CSS d'un composant enfant en utilisant ::ng-deep. J'ai essayé différentes versions du code fourni ci-dessous mais je n'ai pas pu accéder au CSS. La structure du composant HTML est la suivante:

enter image description here

Voici comment j'essaye d'accéder au CSS à partir du composant parent et de modifier la propriété grid-template-columns de la classe:

::ng-deep{
  app-operator-filter{
    .header-logos-card{
      grid-template-columns: repeat(4,1fr);
    }
  }
}

Quelle est la syntaxe correcte pour y parvenir? Je suis également ouvert à d'autres suggestions pour accéder aux composants enfants car j'ai lu que ::ng-deep n'est pas fiable et pourrait être bientôt obsolète?

1
Vasko Vasilev 6 oct. 2020 à 17:25

5 réponses

Meilleure réponse

Cette solution au problème est la suivante:

:host ::ng-deep app-operator-filter{
  .header-logos-card {
    grid-template-columns: repeat(4,1fr) !important;
  }
}

! important était un ajout crucial car les modifications étaient écrasées sans elle.

0
Vasko Vasilev 6 oct. 2020 à 14:51

Ça devrait marcher

::ng-deep .header-logos-card {
  grid-template-columns: repeat(4,1fr);
}
2
Alberto Valerio 6 oct. 2020 à 14:37

::ng-deep sera obsolète à l'avenir oui. Une alternative serait d'importer le fichier CSS / SCSS de l'enfant.

Composant-parent.css

.header-logos-card {
  grid-template-columns: repeat(4, 1fr);
}

Composant-enfant.css

@import './path/to/parent-component.css';

Pour en savoir plus sur les importations css angulaires, cliquez ici.

2
Eddie Reeder 6 oct. 2020 à 14:49

L'utilisation de ::ng-deep pseudo-classe avec n'importe quelle règle CSS annulera complètement l ' encapsulation de la vue pour cette règle et cela deviendra un style global. Alors, essayez de l'utiliser avec :host comme le suggère le Doc d'Angular.

Appliquer complètement la pseudo-classe ::ng-deep à n'importe quelle règle CSS désactive l'encapsulation de la vue pour cette règle. Tout style avec ::ng-deep appliqué devient un style global. Afin de définir le style spécifié au composant actuel et à tous ses descendants, veillez à inclure le: sélecteur d'hôte avant ::ng-deep. Si le combinateur ::ng-deep est utilisé sans le sélecteur de pseudo-classe :host, le style peut autres composants.

Alors, essayez quelque chose comme ça:

:host ::ng-deep app-operator-filter {
  .header-logos-card {
    grid-template-columns: repeat(4,1fr);
  }
}
3
ng-hobby 6 oct. 2020 à 14:55

Ng deep est obsolète, ne l'utilisez pas. À la place, utilisez à la fois le niveau racine et le niveau des composants. Cela fonctionne beaucoup plus facilement. J'ai des articles à ce sujet si vous êtes intéressé.

1
JWP 6 oct. 2020 à 15:25