Question

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

所以我试图解决子状态中的一些数据。我以前做过这个以前的决定，但是遇到第二个问题。

这是我的设置：

应用程序状态

我有一个父状态“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";
                }
            ],
        }
    });
});

当我尝试在console.log中输出应该存在的内容时，在我的控制器中：

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

但是，我正在未定义。

我在AuthService中的方法以成员解析的方式被调用，因此我不确定问题是什么。

Answer 1

事实证明，我只是在App State和Home State中错过了组织的绑定：

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

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

我不确定为什么使用绑定允许这样做但是为了从父状态继承数据，它似乎实现了相同的结果。

编辑：重写我的搜索查询后，我能够在UI-Router文档中找到实际显示与我相同的内容的部分：

不使用解析数据注入控制器，而是使用单向分量输入绑定，即＆lt;。

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

这似乎将数据连接到特定的Controller，就像将数据注入Controller连接它一样。虽然我仍然不确定是否存在绑定和注射之间的任何引擎盖差异。

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

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

未定义解析Controller，UI-Router中的数据

应用程序状态

本州

1 个答案: