Communication intercomposante

Question

Je travaille avec Angular 1.6. J'ai composante "utilisateur-details", containts Wich deux autres composants "switcher" et "tables utilisateur" comme ceci:

composant

<user-details> 
    <switcher> </switcher> 
    <user-table> </user-table> 
</user-details> 

"switcher" contient md-sélecteur et "table utilisateur" contient la table avec des données. J'ai besoin de masquer mes composants "user-table" à l'aide de la directive ng-if, quand j'appuie sur md-switcher.

Answer 1

Vous pouvez envelopper le composant <user-table> avec un div (ou même span), puis utilisez le ng-if ou ng-show. La condition de masquage de ce composant peut alors être modifiée avec md-switcher.

Donc, en supposant que vous avez un commutateur md comme ceci:

<md-switch ng-model="canShow" aria-label="Show?"> 
    Show ? 
</md-switch> 

L'expression "canShow" est utilisé pour lier les données et est ensuite utilisé pour décider d'afficher/masquer la <user-table> comme ceci:

<div ng-show="canShow" ...> 
    <user-table> </user-table> 
</div> 

Bien que j'ai utilisé div, je suis sûr que vous pouvez obtenir un effet similaire en utilisant span. Essayez-le et faites-nous savoir si cela vous aide.