Comment passer des données entre les composants frères sans utiliser $scope?

Bien que l'approche composant parent (transmission de données via des attributs) soit une implémentation parfaite et valide, nous pouvons réaliser la même chose de manière plus simple en utilisant une usine store.

Fondamentalement, les données sont conservées par le Store, qui est référencé dans la portée des deux composants, permettant des mises à jour réactives de l'interface utilisateur lorsque l'état change.

Exemple:

angular
    .module('YourApp')
    // declare the "Store" or whatever name that make sense
    // for you to call it (Model, State, etc.)
    .factory('Store', () => {
        // hold a local copy of the state, setting its defaults
        const state = {
            data: {
              heroes: [],
              viewType: 'grid'
            }
        };
        // expose basic getter and setter methods
        return {
            get() {
                return state.data;
            },
            set(data) {
                Object.assign(state.data, data);
            },
        };
    });

Ensuite, dans vos composants, vous devriez avoir quelque chose comme:

angular
    .module('YourApp')
    .component('headerComponent', {
        // inject the Store dependency
        controller(Store) {
            // get the store reference and bind it to the scope:
            // now, every change made to the store data will
            // automatically update your component UI
            this.state = Store.get();

            // ... your code
        },
        template: `
            <div ng-show="$ctrl.state.viewType === 'grid'">...</div>
            <div ng-show="$ctrl.state.viewType === 'row'">...</div>
            ...
        `
    })
    .component('mainComponent', {
        // same here, we need to inject the Store
        controller(Store) {
            // callback for the switch view button
            this.switchViewType = (type) => {
                // change the Store data:
                // no need to notify or anything
                Store.set({ viewType: type });
            };

            // ... your code
        },
        template: `
            <button ng-click="$ctrl.switchViewType('grid')">Switch to grid</button>
            <button ng-click="$ctrl.switchViewType('row')">Switch to row</button>
            ...
        `

Si vous voulez voir un exemple de travail, découvrez ce CodePen.

Ce faisant, vous pouvez également activer la communication entre 2 ou n Composants . Vous n'avez qu'à:

1. injecter la dépendance du magasin
2. assurez-vous de lier les données du magasin à l'étendue de votre composant

, Comme dans l'exemple ci-dessus (<header-component>).

Dans le monde réel, une application typique doit gérer beaucoup de données afin de faire plus de sens pour logiquement divisé les domaines de données d'une certaine façon. En suivant la même approche , Vous pouvez ajouter d'autres usines de magasins . Par exemple, pour gérer les informations de l'utilisateur enregistré en cours plus une ressource externe (C.-À-catalogue), vous pouvez créer un UserStore plus un CatalogStore -- alternativement UserModel et CatalogModel; ces entités seraient également de bons endroits pour centraliser des choses comme la communication avec le back-end, ajouter une logique métier personnalisée, etc. . La gestion des données sera alors sous la seule responsabilité du Store usine.

Gardez à l'esprit que nous mutons les données du magasin. Bien que cette approche soit simple et claire, elle pourrait ne pas bien évoluer car elle produira des effets secondaires . Si vous voulez quelque chose de plus avancé (immuabilité, fonctions pures, arbre d'état unique, etc.) découvrez Redux, ou si finalement vous souhaitez basculer Angulaire 2 regardez ngrx/store.

Espérons que cela aide! :)

Vous n'avez pas à le faire L'angulaire 2 façon, parce que juste au cas où vous migriez parfois... Faire si il un sens pour vous de le faire.

Utilisez des événements personnalisés pour y parvenir. vous pouvez transmettre un message à travers votre application à l'aide des répartiteurs d'événements $emit(name, args); or $broadcast(name, args); Et vous pouvez écouter ces événements en utilisant la méthode $on(name, listener);

J'espère que ça aide

Réf: https://docs.angularjs.org/api/ng/type/ $ rootScope. Scope# $ emit

Exemple: vous pouvez notifier le changement comme ci-dessous à partir de votre composant d'en-tête

$rootScope.$emit("menu-changed", "list");

Et vous pouvez écouter le changement dans votre directive main-component comme

$rootScope.$on("menu-changed", function(evt, arg){
  console.log(arg);
});