-1
votes

Comment accéder au corps d'un composant

J'ai une application angulaire dans laquelle j'ai cette propriété provenant de "Cody" Tag Overflow-y: auto . Le problème est que je veux définir Overflow-y: caché juste pour une seule page. Pour faire cela, je dois accéder à l'étiquette du corps d'un composant. C'est mon problème, je ne peux tout simplement pas faire ça.

J'ai essayé xxx xxx

et aucune de ces personnes n'a travaillé.

dans cet exemple en direct, je ne peux pas changer par exemple le fond du corps de héros-détaillé-box.css.CSS

https://stackblitz.com/angular/kmq queakjvya


                        
                        
                            
                                                                    angular
                                                            
                        
                                                    
                            
                            
                                1 commentaires
                                
                                                                            Pouvez-vous nous fournir un  exemple minimal et reproductible ?  Stackblitz.com  est idéal pour cela.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                    
   Reportez-vous  styles de composants angulaires   p>
 Les applications angulaires sont stylés avec CSS standard. Cela signifie que vous pouvez appliquer tout ce que vous connaissez sur les fêtes de style CSS, les sélecteurs, les règles et les requêtes de média directement sur des applications angulaires.  P> 
 De plus, des styles de composants de paquets angulaires peuvent contenir une conception plus modulaire que les feuilles de style ordinaires.  p> 
 Cette page explique comment charger et appliquer ces styles de composants.  P> 
 Vous pouvez exécuter le Live  Exemple  dans Stackblitz Pour expérimenter comment mettre des styles à l'intérieur du composant  P> 
 Modifier (comme votre exigence Essayez la méthode suivante):  P> 
@Component({
  selector: 'app-root',
  template: `
    <style>
      body {
        overflow-y: hidden;
      }
    </style>
  `
})

                                

                                                                    
                                    
                                    
                                        3 commentaires
                                        
                                                                                            
                                                    édité il y a diverses méthodes. Vous devriez jeter un coup d'œil et essayer la méthode la plus appropriée pour vous                                                
                                                
                                                                                            
                                                    C'est ce que j'essaie d'expliquer, avec cette méthode que vous avez montrée, je peux modifier l'hôte  , mais pas exactement la balise corporelle, que j'essaie d'atteindre. Dans cet exemple en direct, essayez d'éditer le  héros-box-box.css  et modifier le fond du corps.                                                

                                                
                                                                                            
                                                    Ne fonctionnant pas non plus avec  Styles: ['Corps {Overflow-y: caché; } ']                                                 

                                                
                                                                                    

                                    

                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Le point d'un système de composant encapsulé consiste à vous empêcher de placer du code non associé au composant en dehors du composant. La bonne façon de gérer cela serait sur votre niveau supérieur  app.commezent  code> où toute autre modification du    code> peut se produire. 
 Vous devez vérifier votre route actuelle. et appliquer une classe CSS en conséquence car le    code> ne fait pas partie de votre composant.  p>  xxx  pré> 
 Vous pouvez ensuite sélectionner cette classe HTML dans votre Global Stylesheet pour le corps (à nouveau, ce n'est pas spécifique à un composant, c'est une édition directe du corps).  P> 
body {
  overflow-y: auto

  &.hide-overflow {
    overflow-y: hidden;
  }
}

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    -1
 votes
                                
                            
                            
                                
                                     Vous pouvez définir l'encapsulation : affectation affichant.none  code> pour votre composant, ce qui permettrait de définir directement le style du corps: 
/deep/ body {
    overflow-y: hidden;
}

/* or */

>>> body {
    overflow-y: hidden;
}

/* or */

::ng-deep body {
    overflow-y: hidden;
}

                                

                                                                    
                                    
                                    
                                        6 commentaires
                                        
                                                                                            
                                                    N'utilisez pas de sélecteurs profonds, ils sont obsolètes. Ne désactivez pas la vie de vie d'affichage sauf si vous voulez que vos styles saignent dans tous les autres composants. Cela affectera également votre taille de paquet final car elle agit moins efficace.                                                
                                                
                                                                                            
                                                    @Andrewhhill ok, mais jusqu'à présent, c'est une approche qui a fonctionné                                                
                                                
                                                                                            
                                                    @Felipipipedlich Tout dépend à quel point vous êtes strict sur la bonne façon. Si vous voulez quelque chose qui fonctionne, allez-y. Si vous voulez faire des choses par le livre, je suggérerais une solution différente - celle-ci est hacky au mieux.                                                
                                                
                                                                                            
                                                    @Andrehhill c'est exactement ce que j'ai écrit à la fin. Parfois, il vous suffit de faire fonctionner, même si ce n'est pas le moyen approprié.                                                
                                                
                                                                                            
                                                    @ Krypt1 en fait etrehhill n'est pas si faux, nous avons tous des délais serrés, alors je vais maintenant laisser une marque dans mon code et essayer de le résoudre plus tard, mais malheureusement vrai monde nous oblige parfois à faire des choses qui ne sont pas idéales                                                
                                                
                                                                                            
                                                    @Andrehhill Eh bien, nous ne savons pas vraiment quel type de projet est-ce. Peut-être que c'est un projet de week-end, une preuve de concept, une startup ou une mission d'élève. Cela pourrait aussi être un correctif d'urgence, qui est nécessaire ici et en ce moment. Les hypothèses peuvent être encore plus dangereuses que la dette technique dans le développement de logiciels. Quoi qu'il en soit, j'ai écrit une note pourquoi je n'encourage pas cette solution et comment je pense que c'est un meilleur moyen de résoudre le problème à la main.