web-dev-qa-db-fra.com

Quoi utiliser à la place de :: ng-deep

J'essaie de styler un élément placé par la sortie du routeur dans angular et je veux m'assurer que l'élément généré a une largeur de 100%

De la plupart des réponses, je vois que je devrais utiliser le ::ng-deep sélecteur, mais à partir de docs angular est obsolète. Existe-t-il une alternative à ::ng-deep?

htmlcssangular
46
Jacob Schwartz

FWIW Dans mes recherches, je n’ai trouvé aucun produit de remplacement pour ng-deep ou pour d’autres alternatives applicables. C’est parce que, je crois, l’équipe Angular se reporte à la spécification W3C sur le dom de l’ombre, qui disposait initialement de sélecteurs tels que deep. Cependant, le W3c a depuis été supprimé. la recommandation, mais ne l'a pas remplacée par une nouvelle. En attendant, j'imagine que Angular conservera ::ng-deep et ses alternatives disponibles, mais dans un état déprécié en raison de l'état en attente des brouillons du W3C. Je ne suis pas en mesure de prendre le temps de trouver la documentation à l'appui, mais je l'ai vue récemment.

Longue histoire courte: Continuez à utiliser ::ng-deep et ses alternatives jusqu’à ce qu’un remplaçant soit créé - la dépréciation n’est qu’un préavis, de sorte que les personnes ne soient pas aveugles chaque fois que le changement se matérialise.

- [~ # ~] mettre à jour [~ # ~] -

https://drafts.csswg.org/css-scoping-1/ Voici l'ébauche de proposition si cela vous intéresse. Il semble qu’ils travaillent sur un ensemble de sélecteurs robustes pour les éléments d’un arbre dom dom; c’est cette spécification, une fois approuvée, qui, selon moi, informera le clone angular, s’il en existe même un (c.-à-d. angular peut ne pas avoir besoin de mettre en œuvre leur propre sélecteurs une fois que cela passe en direct dans les navigateurs).

56
dudewad

Pour contourner les obsolètes ::ng-deep, Je désactive habituellement ViewEncapsulation. Bien que ce ne soit pas la meilleure approche, cela m’a bien servi.

Pour désactiver ViewEncapsulation, procédez comme suit dans votre composant:

import { Component, ViewEncapsulation } from '@angular/core';

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

export class HeaderComponent {

}

Cela rendra les styles .scss de ce composant globaux à l'ensemble de l'application. Pour que les styles ne puissent pas remonter dans la chaîne jusqu'aux composants parents et frères, encapsulez l'intégralité du fichier scss avec le sélecteur, comme suit:

app-header {
  // your styles here and any child component styles can go here
}

Maintenant, les styles spécifiés ici vont descendre aux composants enfants, vous devez donc être très spécifique avec vos sélecteurs css et tenir compte de vos points et q lors de l'ajout de CSS (peut-être ajouter le sélecteur enfant spécifié dans votre Angular = app et ensuite ses styles).

Je dis que ce n'est pas la meilleure approche en raison du paragraphe ci-dessus, mais cela m'a bien servi.

9
AliF50

L'alternative simple et facile à un style profond est un style commun utilisant le sélecteur d'élément du composant parent. Donc, si vous avez cela dans hero-details.component.css:

:Host ::ng-deep h3 {
  font-style: italic;
}

Cela deviendrait ceci dans styles.css:

app-hero-details h3 {
  font-style: italic;
}

Fondamentalement, un style profond est un style non encapsulé, de sorte qu'il me semble conceptuellement plus un style commun qu'un style de composant. Personnellement, je n'utiliserais plus les styles profonds. Les modifications les plus récentes sont normales dans les mises à jour de versions majeures et la suppression des fonctionnalités obsolètes est un jeu équitable.

3
J. Lenthe

Ce n'est pas un remplacement général pour :: ng-deep, mais pour le cas d'utilisation décrit par l'auteur de la question:

Dans le cas particulier où vous souhaitez styler l'élément inséré par un routeur-prise, il existe une solution élégante utilisant le sélecteur de voisins adjacents en CSS:

router-outlet+* {
  /* styling here... */
}

Ceci s’appliquera à tous les éléments qui sont des voisins directs d’un routeur-prise.

Lectures complémentaires:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

2
mrm1st3r