Javascript 基于角度分量的方法及在路由器中使用resolve

因此，我在angular中使用基于组件的方法，假设我有一个名为

的指令

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
    };
};

现在我可以在路由中使用组件
，如下所示：

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

问题

如何将“解析”与基于组件的方法结合使用？aaj
事实证明，$routeProvider将解析的局部变量传递给$routeChangeSuccess事件（nextRoute.locals）。因此，您可以创建一个侦听路由更改并公开本地信息的服务：

angular.module('myApp', ['ngRoute'])
.factory('$routeLocals', function($rootScope) {
  var locals = {};
  $rootScope.$on('$routeChangeSuccess', function(_, newRoute) {
    angular.copy(newRoute.locals, locals);
  });
  return locals;
})
.run(function($routeLocals) {});

然后您可以将$routeLocals注入指令并使用它们

例如：

关于这一点，有一个已解决的问题：

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

好消息是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
        };
    });

并隐藏指令，直到在根元素处加载了
ng if=“loaded”
。是的，这是一个有点太多的用户代码，但您至少可以控制一切。
在Angular 1.x中，当一些数据来自ajax的指令绑定（'='）时，我在指令中查看这些绑定，我没有正确地呈现指令。我查看了很多stackoverflow主题和博客，以及他们写的关于数据绑定的所有内容，但这对我没有帮助，我亲眼看到，有时指令没有呈现，但数据来了

在这种情况下，只有指令parent controller中的
resolve
可以帮助我，因为在其他情况下，它看起来像是未定义的行为。我从指令记录，数据设置正常，但指令未呈现！（在简单的情况下，我不使用ng if或ng show来隐藏它）

您可以阅读更多
您指出了角路线系统中的一个大问题。局部变量（解析）仅传递给路由控制器。如果未指定控制器，将在路由解析之前获取解析，但无法在模板中访问它们。。。最好的解决方法是使用服务获取您的解析，并在指令的链接或指令的控制器初始化中等待它们。。。
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
        };
    });

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