javascript - Angular $routeProvider 解决了组件 Controller 无法立即使用数据的问题

Question

我有一个路线提供者，它要求在执行路线之前解析一些数据，如下所示:

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

然后数据被传递到我的主组件并进行绑定(bind)以允许从 Controller 访问它，如下所示:

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

当尝试在 Controller 加载时立即访问消息中的数据时(我的印象是 Controller 在 routeProvider 中的解析函数解析之前不会执行其代码......)我想出了一个 undefined variable 。

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

超时函数中的代码正确执行数据。我再次感到 Controller 代码在收到来自 resolve promise 的数据之前不会被调用/执行。我觉得我一定是在这个逻辑上犯了错误。

任何人都可以提供有关为什么即使在使用 resolve 时数据也会延迟到组件 Controller 的信息吗？

谢谢!

Answer 1

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

定义一个 Controller ，它使用带有 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;
});

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

信息

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

如果您的路线是“/home”，那么将其命名为:

controller : HomeController
templateUrl : 'home.html'

如果你想使用一个组件来显示主页消息，那么将它命名为:

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

不要忘记:路由 Controller 和组件 Controller 是不同的!