基于角度组件的方法并在Router中使用resolve

kingdavid：

所以我正在使用基于组件的角度方法，可以说我有一个名为 <home></home>;

import template from  './home.html';
import controller from './home.controller.js';

angular.module('myApp')
   .directive('home', homeDirective);

let homeDirective = () => {
    return {
        restrict: 'E',
        template, 
        controller,
        controllerAs: 'vm',
        bindToController: true
    };
};

现在，我可以<home></home>在路由中使用该组件，如下所示：

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home></home>'
        })
    })

我真的很喜欢这种方法，但是使用“旧”方法时，我习惯于在routeconfig中使用“ resolve”来仅在解决了promise的情况下呈现组件：

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            templateUrl: './home.html',
            controller: './home.controller.js',
            resolve: {
            message: function(messageService){
                return messageService.getMessage();
            }
        })
    })

题

如何在角度的基于组件的方法中使用resolve？aj

Tamas Hegedus：

关于此问题，存在一个封闭的问题：对指令的支持resolve选项。

结论是，他们不希望异步加载任意指令，因为这会导致过多的闪烁。

好消息是，Angular 2在DI层以一种紧密结合的方式支持了这一点（以及更多），并且不会带来很多额外的复杂性。

在Angular 1.x中，您可以为指令分配一些信息，从中可以获取消息的位置，并在控制器中处理异步加载。这样，您也可以显示一些不错的加载程序屏幕。

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home my-datasource="feed1"></home>'
        }).when('/other', {
            template: '<home my-datasource="feed2"></home>'
        })
    })
    .factory('DataSources', (messageService) => {
        return {
            feed1: messageService.getMessage,
            feed2: messageService.getError
        };
    });

或者，如果您希望message始终来自同一来源，则可以刻录messageService.getMessage().then(...)到控制器中。

如果您不希望在承诺解决之前完全看到该指令，则可以引入一个范围变量，该变量最初设置为false，然后在解析时将其设置为true，例如：

app.controller('HomeController', ($scope, messageService) => {
   $scope.loaded = false;
   messageService.getMessage().then(message => {
       ...
       $scope.loaded = true;
   });
   ...
});

并隐藏指令，直到ng-if="loaded"在根元素处加载该指令为止。是的，这是太多的用户代码，但是您至少可以控制所有内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。