基于角度组件的方法和在路由器中的解决方案

Angular component based approach and working with resolve in Router

本文关键字：路由器 解决方案 方法 于角度 组件      更新时间：2023-09-26

所以我在角度中使用基于组件的方法，比如说我有一个名为<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"，只有在承诺得到解决时才能呈现组件：

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

问题

如何在角度中使用基于组件的方法进行解析？aaj

有一个悬而未决的问题：支持指令的解析选项。

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

好消息是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(...)刻录到控制器中。

如果你不想在promise解析之前看到指令，你可以引入一个范围变量，最初设置为false，然后在解析时设置为true，例如：

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

并隐藏该指令，直到在根元素处加载了CCD_。是的，这有点太多的用户代码了，但你至少可以控制一切。

事实证明，有角度的$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注入到指令中并使用它们。

示例：http://codepen.io/fbcouch/pen/eJYLBe

https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L614

在Angular 1.x中，当一些数据从ajax和其他方面到达我的指令绑定（'='）时，我在指令中观察这个绑定，我没有正确地呈现指令。我查看了很多stackoverflow主题和博客，以及他们写的关于数据绑定和观看的所有内容，但这对我没有帮助，我亲眼看到，有时指令没有呈现，但数据来了。

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

您可以在这里阅读更多

相关文章：