Question

我有一个路由提供商，要求在执行路由之前解析一些数据，如下所示：

$routeProvider.when("/", {
    template: '<home message="$resolve.getMessage"></home>',
    resolve: {
        getMessage: getMessage
    }
})

然后将数据传递到我的主组件，并进行绑定以允许从控制器访问它，如下所示：

.component('home', {
    templateUrl: '/app/content/home.component.html',
    bindings: {
        message: '='
    },
    controller: 'HomeController'
});

当控制器加载时尝试立即访问消息中的数据时（我的印象是控制器不执行其代码，直到routeProvider中的resolve函数解析...）我想出一个未定义的变量。

function HomeController() {
    var vm = this;
    console.log(vm.message); //undefined
    setTimeout(function () {
        console.log(vm.message); //properly defined
    }, 1000);
}

超时功能中的代码正确执行数据。我再次认为，在收到来自解析承诺的数据之前，未调用/执行Controller代码。我觉得我必须犯这个逻辑错误。

任何人都可以提供有关数据延迟到组件控制器的原因的信息，即使使用了解决方法吗？

谢谢！

Answer 1

因为您正在呼叫$resolve。你不应该在你的HTML中调用它。

使用resolve解析使用服务的控制器：

$routeProvider.when("/", {
    template: '<home message="homeMessage"></home>',
    controller : 'MyRouteController',
    resolve: {
        message : getMessage
        //getMessage can be async
    }
})


app.controller("MyRouteController", function ($scope, message) {
    $scope.homeMessage = message;
});

现在您可以将其发送到您的组件。

<强> INFO

我建议在这种情况下使用templateUrl。

如果您的路线是“/ home”，请将其命名为：

controller : HomeController
templateUrl : 'home.html'

如果要使用组件显示主页消息，请将其命名为：

component : home-message.component.js
controller : HomeMessageController
templateUrl : 'home-message.html'

不要忘记：路径控制器和组件控制器是不同的！

Answer 2

我假设您正在使用角度1.6版本，其中绑定变得未定义。

您已使用$onInit方法访问绑定。

function HomeController() {
    var vm = this;
    console.log(vm.message); //undefined
    vm.$onInit = function(){
    // Angular 1.6 onwards, bindings will only be accessible in $onInit method
    console.log(vm.message);  // binding value after resolve
    };
}

来自https://docs.angularjs.org/guide/component

$ onInit（） - 在一个控制器上的所有控制器上调用每个控制器已经构造了元素并初始化了它们的绑定（和之前和之前为此指令发布链接函数元件）。这是放置初始化代码的好地方控制器。

Angular $ routeProvider解决了不使数据立即可供组件控制器使用的问题

2 个答案: