Controller、UI-Router 中未定义的解析数据答案

【问题标题】：Undefined resolve data in Controller, UI-RouterController、UI-Router 中未定义的解析数据
【发布时间】：2018-02-01 15:12:34
【问题描述】：

注意：此问题与UI-Router and resolve, unknown provider in controller 类似，但不同之处在于它专门处理 AngularJS 1.5+ 和基于组件的应用程序，这些应用程序改变了状态解析的配置方式。

所以我试图在子状态下解析一些数据。我之前为之前的解决方案做过此操作，但在第二个解决方案中遇到了问题。

这是我的设置：

应用状态

我有一个父状态“app”和一个子状态“home”。当用户登录时，他们会经历完成解析的“app”状态，然后他们会被重定向到“home”状态。

angular
.module('common')
.component('app', {
    templateUrl: './app.html',
    controller: 'AppController',
    bindings: {
        member: '=',
    }
})
.config(function ($stateProvider) {
    $stateProvider
        .state('app', {
            redirectTo: 'home',
            url: '/app',
            data: {
                requiredAuth: true
            },
            resolve: {
                member: ['AuthService',
                    function (AuthService) {
                        return AuthService.identifyMember()
                            .then(function (res) {
                                AuthService.setAuthentication(true);
                                return res.data;
                            })
                            .catch(function () {
                               return null;
                            });
                    }
                ],
                organization: ['AuthService',
                    function (AuthService) {
                        return AuthService.identifyOrganization()
                            .then(function (res) {
                                return res.data;
                            })
                            .catch(function () {
                                return null;
                            });
                    }
                ],
                authenticated: function ($state, member) {
                    if (!member)
                        $state.go('auth.login');
                }
            },
            component: 'app',
        });
});

家乡

angular
.module('components')
.component('home', {
    templateUrl: './home.html',
    controller: 'HomeController',
    bindings: {
        member: '=',
    }
})
.config(function ($stateProvider) {
    $stateProvider
    .state('home', {
        parent: 'app',
        url: '/home',
        data: {
            requiredAuth: true
        },
        component: 'home',
        resolve: {
            'title' : ['$rootScope',
                function ($rootScope) {
                    $rootScope.title = "Home";
                }
            ],
        }
    });
});

当我尝试控制台时，在我的控制器中记录应该存在的输出：

function HomeController(AuthService, $state) {
    let ctrl = this;
    console.log(ctrl.organization);
}

但是，我得到undefined。

我在 AuthService 中的方法被调用的方式与 member 解决方法相同，所以我不确定问题出在哪里。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

事实证明，我只是在 App State 和 Home State 中都缺少 organization 的绑定：

bindings: {
    member: '=',
    organization: '=',
}

注意：因为我使用了绑定，所以我不必将数据注入控制器本身，如以下链接中的 UI-Router 文档所示： https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#inherited-resolved-dependencies

我不确定为什么使用绑定允许这样做，但出于从父状态继承数据的目的，它似乎可以达到相同的结果。

编辑：改写我的搜索查询后，我能够在 UI-Router 文档中找到与我所做的相同的部分：

不要将解析数据注入控制器，而是使用单向组件输入绑定，即 <.>

https://ui-router.github.io/guide/ng1/route-to-component#create-a-component

这似乎将数据连接到特定的控制器，就像将数据注入控制器一样连接它。虽然我仍然不确定绑定和注入之间是否存在任何内部差异。

鉴于 UI-Router 显示的逻辑与我使用的相同，这似乎是允许 Controller 访问特定状态的已解析数据的正确方法。

我要说的唯一另一件事是注意您需要使用哪种类型的绑定。您可以在基于组件的应用程序架构下找到不同类型及其描述，然后在组件具有定义良好的公共 API - 输入和输出下： https://docs.angularjs.org/guide/component

【讨论】：