服務器端的Angular 1.5組件路由

Question

我希望將angular版本升級到1.5，並試圖弄清楚如何在Angular 1.5組件路由中進行路由。 當前，我們正在使用舊的角向路由器進行以下操作：

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調用轉到服務器，並根據URL中的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，該JSON將具有權限列表。 使用該對象創建路由。 在登錄頁面中調用以下方法

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

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

routeService是實際上會生成路線的服務

現在根據用於路由的參數定義接口（例如：路徑，名稱，組件，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;
    }