6
votes

Comment styler un composant de frère de soeur en angular2?

J'ai un composant de recherche contenant un logo, une barre de recherche et une roupée. L'exécution d'une recherche navigue sur les résultats, qui est le pseudo html décrit ici:

<search>
  <logo></logo>
  <searchbar></searchbar>
  <result-list></result-list>
</search>

angular html css

6 commentaires

Dep de Stackoverflow.com/Questtions/36527605/...

J'ai lu ce post, c'est-à-dire du parent et non d'un frère de frère.

Souhaitez-vous créer une plunk?

J'ai eu ton point mais je ne pense pas qu'il y ait un moyen de styler une composante frère de frère de frère. Soit vous pouvez le faire du parent ou de l'enfant.

D'accord. Je suppose que je devrais alors donner le logo et le composant de la barre de recherche un paramètre pour ajouter une classe de style pour la page Résultat. Une sorte de contradiction de l'approche de la composante.

Encore une fois, je ne comprends pas mais sonne comme une solution.

3 Réponses :

1
votes

Ce que vous essayez de partager essentiellement l'état de l'application global ISSEARCHRESUTLIST: Boolean code> sur plusieurs composants.

La solution naïve évidente consisterait à maintenir l'état au composant parent partagé respectif et à la définir sur la base de la prise de routeur actuelle. P>

<search>
  <logo [isSearchResultList]="isSearchResultList"></logo>
  <searchbar [isSearchResultList]="isSearchResultList"></searchbar>
  <result-list></result-list>
</search>

2 commentaires

J'espérais ne pas mettre un état là-bas. Solution similaire ci-dessous.

Je peux vous intéresser à cela, je serais également intéressé par des approches alternatives.

2
votes

une solution similaire à celle de Jens Habegger en utilisant : contexte hôte (mycssclass) et un conditionnel. Le style doit être ajouté au logo code> code> et la barre de recherche code>. XXX PRE>

:host-context(.myCssClass) {
  color: black;
 }

0 commentaires

0
votes

Vous pouvez utiliser des services pour la communication entre composants et ngclass pour le style dynamique.

notification.service.ts xxx

lorsque le composant de soeur Envoie un message.

bar.component.ts xxx

écoutez les messages entrants de votre composant.

foo.component.ts < Pré> xxx

Vous pouvez appliquer n'importe quelle classe via ngclass

foo.component.html xxx

0 commentaires