在 AngularJS 中传递来自同一级别组件的数据

Question

我有一个问题，关于我们如何在没有 $scope 或 $rootScope 的情况下将数据从一个组件传递到另一个组件，但类似于 Angular (2/4)。假设我有三个组成部分：

rootComponent：应用程序的入口点
phoneListComponent: 显示列表phones
phoneDetailComponent：显示选中的详细信息phone

根组件源代码：

'use strict';

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

phoneListComponent源代码：

'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源代码：

'use strict';

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

可以看到每个组件都声明在自己的模块中，phone列出模块和phone详细模块 在 phoneCatApp 模块.

中注册

由于组件有自己独立的作用域，我无法将所选属性从 phoneList 传递到 phoneDetail。知道我寻求松散耦合并且没有 $scope 或 $rootScope 的可能解决方案是什么？

我已经在 Whosebug 上看到了这个答案，但在我看来，如果没有父级在它们之上进行编排，我的模块将无法工作，但情况并非总是如此。

谢谢

Answer 1

你可以使用两种策略：

第一个是将回调传递给您的子组件（通过绑定）你的根组件，所以你会知道什么时候值改变了然后做你需要做的。
另一种方法是使用 angular 服务是单例的，因此您可以观看特定的控制器中的值，然后在它发生变化时执行某些操作。

这种情况，我建议第一个。

在 AngularJS 中传递来自同一级别组件的数据

passing data from same level components in AngularJS

javascript

components

angularjs

angularjs-directive

angularjs-components