transmettre des données à partir de composants de même niveau dans AngularJS

Question

J'ai une question sur la façon dont nous pouvons transmettre des données d'un composant à un autre sans $ scope ou $ rootScope mais quelque chose de similaire à Angular (2/4). Supposons que j'ai trois composants:

• rootComponent: Point d'entrée de l'application
• phoneListComponent: Afficher la liste des téléphones
• phoneDetailComponent: Afficher les détails du téléphone sélectionné

source rootComponent code:

'use strict'; 

angular.module('phonecatApp'). 
component('appRoot', { 
    templateUrl: 'app-root.template.html', 
    controller: [ 
     function appRootController(){ 
      var self = this; 
     } 
    ] 
}); 

phoneListCode source:

'use strict'; 

// Register `phoneList` component, along with its associated controller and template 
angular.module('phoneList').component('phoneList', { 
    //Note: the URL is relative to our 'index.html' file 
    templateUrl: 'phone-list/phone-list.template.html', 
    controller: [ 
     function PhoneListController() { 
      var self = this; 
      self.phones = [ 
       { 
        "name": "Huawei P9 lite", 
        "description": "This is one hell of a phone", 
        "price": "250€" 
       }, 
       { 
        "name": "Samsung S8", 
        "description": "Great phone but really expensive", 
        "price": "700€" 
       } 
      ] 

      self.select = function(phone){ 
       self.selected=phone; 
      } 

     } 
    ] 
}); 

phoneDetailComponent code source:

'use strict'; 

    angular.module('phoneDetail'). 
      component('phoneDetail', { 
       templateUrl: 'phone-detail/phone-detail.template.html', 
       bindings: { 
        selected: '<' 
       }, 
       controller: [ 
        function phoneDetailController(){ 
         var self = this; 
        } 
       ], 
      }); 

Vous pouvez voir que chaque composant est déclaré dans son propre module et module phoneList et module phoneDetail sont enregistrés dans Module phoneCatApp.

Étant donné que les composants ont leurs propres étendues isolées, je ne peux pas passer l'attribut sélectionné de phoneList à phoneDetail. Quelles sont les solutions possibles sachant que je cherche un couplage lâche et pas $ scope ou $ rootScope? StackOverflow m'a déjà vu cette réponse here mais il me semble que mes modules ne fonctionneront pas s'il n'y a pas un parent qui orchestre au-dessus d'eux, ce qui peut ne pas toujours être le cas.

Merci

Answer 1

Vous pourriez-vous utiliser deux stratégies:

• Le premier est le passage d'un rappel à vos composants enfants (par les liaisons) de votre composant racine vous serez donc au courant lorsque la valeur changée et alors faites ce que vous devez faire.
• Une autre approche pourrait être l'utilisation d'un service angulaire qui est un singleton afin que vous puissiez regarder une valeur spécifique à l'intérieur de votre contrôleur, puis faire quelque chose quand il change.

Dans ce cas, je suggère le premier.