web-dev-qa-db-fra.com

Alternative à/profond /

Je souhaite modifier les styles du composant de pagination ng bootstrap et utiliser les liens /deep/ dans une application Angular 6. Le code suivant fonctionne bien, mais la console affiche un avertissement indiquant que le code est obsolète.

Alors, comment devrais-je le changer pour me débarrasser de l'avertissement?

Voici le code CSS que j'utilise actuellement:

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }
cssangularangular6ng-bootstrap
5
s4tr2

Une alternative à l'utilisation de /deep/ ou ::ng-deep consiste à désactiver View Encapsulation sur vos composants qui utilisent des éléments d'interface utilisateur tiers.

@Component({
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Cela signifie que:

Angular ajoute le CSS aux styles globaux. Les règles de cadrage, les isolements et les protections évoqués précédemment ne s'appliquent pas. C'est essentiellement le même que le collage des styles du composant dans le code HTML.

Si vous désactivez l’encapsulation des vues, veillez à ne cibler que l’élément html de votre choix, et non les autres éléments du même type dans différents composants de votre application (par exemple, ajoutez une personnalisation classe ou id à votre élément). 

Quand j'ai désactivé ViewEncapsulation} _, j'ai également dû utiliser !important dans mon CSS pour écraser les styles tiers existants, alors que ce n'était pas toujours nécessaire avec ::ng-deep.

5
fridoo

:: ng-deep,/deep/et >>> désapprobation La pseudo-classe :: ng-deep Le sélecteur a également deux alias: >>> et/deep /, et tous les trois sont bientôt à enlever.

La raison principale en est que ce mécanisme pour percer le style Un bac à sable d'isolation autour d'un composant peut potentiellement encourager une mauvaise .__ pratiques de style.

La situation évolue toujours, mais pour le moment, :: ng-deep peut être utilisé si nécessaire pour certains cas d'utilisation.

https://blog.angular-university.io/angular-Host-context/

Donc utilisez :: ng-deep à la place

1
René Winkler