Question

我希望将角度版本升级到1.5并尝试弄清楚如何在Angular 1.5 Component Routing中进行路由。目前，我们使用旧的角度路由器进行如下操作：

myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
    .when("/PP", {
        templateUrl: function (route) {
            var path;
            var menuID = route.MenuID ;

            $.ajax({
                type: "POST",
                async: false,
                url: "./api/MyControllerName/MyControllerMethodName",
                contentType: "application/json",
                data: angular.toJson({
                    Action: 'NavigationManager.GetHtmlFilePath',
                    Data: { MenuID: menuID }
                })
            }).then(function (data) {
                if (data.Success == true) {
                    var rte = $.parseJSON(data.Data);
                    path = rte.Route;
                }
            })
            return path;
        },
        reloadOnSearch: false
    })
    .otherwise({ redirectTo: "/Home" });

}]）;

$ .ajax调用转到服务器并根据网址中的MenuID获取html文件的完整路径。最终，此html文件中的内容将放置在ng-view中。

我看到的角度1.5分量路由的所有例子都有硬编码路径信息，如下所示：

angular.module('heroes', [])
.component('heroes', {
    template: '<ng-outlet></ng-outlet>',
    $routeConfig: [
      { path: '/', name: 'HeroList', component: 'heroList', useAsDefault: true },
      { path: '/:id', name: 'HeroDetail', component: 'heroDetail' }
    ]
})

我的问题是如何用来自服务器的值替换硬编码值，就像我使用旧角度路由器一样？

Answer 1

我有同样的要求。我不得不根据权利设置菜单。我的应用程序被划分为组件树。因此，在登录页面上，我将路由注册表设置如下：

  class appOptions implements ng.IComponentOptions {

    public controller: any;
    public template: string;
    public $routeConfig: any;
    constructor() {

        this.$routeConfig = [
            { path: '/', name: 'Login', component: 'login', useAsDefault: true },
            { path: '/workspace/...', name: 'Workspace', component: 'workspace' }
        ];
        this.controller = appCtrl;
        this.template = '<ng-outlet></ng-outlet>';
    }
}

当用户点击登录按钮时，如果通过身份验证，我将获得用户的角色。通过成功的身份验证，服务器将传递具有权限列表的JSON。使用该对象创建路由。在登录页面中调用以下方法

 setRoute() {            
        this.myRoutes= this.routeService.getRoutes();

        this.myRoutes.forEach((route) => {
            this.$router.registry.config('workspace', route.route);
        });
        this.$router.navigate(['Workspace']);
    }

routeService是实际生成路由的服务

现在根据用于路由的参数定义接口（例如：path，name，component，useAsDefault）

 export interface IMyRoutes {
    path: string;
    name: string;
    component: string;
    useAsDefault: boolean
    }

在服务控制器中：

  public workspaceRoutes: app.IMyRoutes [] = []

getRoutes() {
        this.accessProfile = this.userService.GetProfile();//This will get list of permission along with other details from server
        if (this.accessProfile != null && this.accessProfile.Permissions.length > 0) {
            this.accessProfile.Permissions.forEach((permission) => {
                switch (permission) {
                    case "CanAccessMenu_1":
                        this.workspaceRoute = {
                            path: '/another_node_of_tree/...', name: 'Menu1', component: 'menu1', useAsDefault: (this.accessProfile.Role.toLowerCase() == "Role1")
                        }
                        this.workspaceRoutes.push(this.workspaceRoute);
                        break;
                    case "CanAccessMenu_2":
                        this.workspaceRoute = {
                            path: '/some_path/', name: 'Menu2', component: 'menu2', useAsDefault: (this.accessProfile.Role.toLowerCase() == "Role2")
                        }
                        this.workspaceRoutes.push(this.workspaceRoute);
                        break;
                    case "CanAccessMenu_3":
                        this.workspaceRoute = {
                           path: '/another_node_of_tree/...', name: 'Menu3', component: 'menu3', useAsDefault: (this.accessProfile.Role.toLowerCase() == "Role3")
                        }
                        this.workspaceRoutes.push(this.workspaceRoute);
                        break;
                }
            });
        }
        return this.workspaceRoutes;
    }

服务器端的Angular 1.5组件路由

1 个答案: