Angular2命名路由

Question

我用Angular2 Webpack Starter在this newest version和文件./src/app/app.routes.ts我添加「我的新路線」，我想將它命名爲：「my.route」

export const routes: RouterConfig = [ 
    { path: '',  component: Home }, 
    { path: 'home', component: Home }, 
    // make sure you match the component type string to the require in asyncRoutes 
    { path: 'about', component: 'About' }, 
    { path: 'my-new-route', component: 'Dashboard', name:"my.route" }, 
    { path: '**', component: NoContent }, 
]; 

但有一個問題 - 它不工作！ TypeScript寫入:(名稱）「...不能分配到類型Route []」。我檢查文件node_modules/@angular/router/config.d.ts（它指向index.d.ts），實際上 - RouterConfig（Route類）中沒有'name'字段。那麼如何在Angular2中進行命名路線？

Answer 1

我只會使用ng2-translate併爲您的JSON文件中的每種語言創建鏈接。

Answer 2

RC.3是最新的Angular2版本，新的路由器V3-alpha7不支持名稱。名稱被刪除，因爲它沒有與延遲加載路由一起工作。

Answer 3

有一種方法可以在新Angular2路由器命名路由（不支持）（其主要思想是從檢查答案 - @邁克爾羅賓遜）：

文件app.routes.ts我有：

... 
import { Url } from './common/url'; 

export const routes: RouterConfig = [ 
    { path: '',  component: LoginForm }, 
    { path: Url.to('login'), component: LoginForm }, 
    { path: Url.to('home'), component: Home, canActivate: [AllAuthGuard] }, 
    { path: Url.to('clients'), component: Cliens, canActivate: [AdminAuthGuard] }, 
    { path: Url.to('projects'), component: Projects, canActivate: [AdminAuthGuard] }, 
    ... 
    { path: '**',  component: LoginForm }, 
]; 

而在/app/common/url.ts我有類似的東西（我做下面的代碼在這裏用手工不檢查的話）：

export class Url { 
    map = { 
     'login': 'my-super-login', 
     'home': 'my-link-home', 
     'clients': 'favourite-clients', 
     'projects': 'bets-projects', 
    } 

    public static to(routingName : string) { 
     return this.map[routingName]; 
    } 

} 

而在你的項目中每一個地方在林ks你還必須使用Url.to(...)方法（在控制器中使方法links(route)調用Url.to，並在模板中使用它...）。 上面的Url靜態類是理論上的。在實踐中我用戶polyglot.js小型圖書館有參數和翻譯URL支持 - 所以我Url.to方法看起來就像這樣：

export class Url { 
    public static to(routingName : string, values?:any) { 
     return Lang.t('routing.'+routingName, values); 
    } 
} 

其中用類：

var Polyglot = require('../../../../node_modules/node-polyglot/build/polyglot.min.js'); 

import { Auth } from '../'; 
import { en } from './en'; 
import { pl } from './pl'; 

export class Lang { 
    private static instance = null; 
    public polyglot:any; 
    private static emergencyLang = 'en'; 

    constructor() { 
     this.polyglot = new Polyglot(); 
     this.polyglot.extend({ 
      en, 
      pl, 
     }); 
     if(Lang.instance) return; 
     Lang.instance = this; 
    } 

    public static t(key:string, values?:any) { 
     let self = Lang.getInstance(); 
     let user = Auth.user(); 
     let userLang = user ? user.lang : (navigator.language || navigator.userLanguage); 
     let langKey = userLang + '.'+key; 
     if(self.polyglot.has(langKey)) return self.polyglot.t(langKey, values); 

     return self.polyglot.t(Lang.emergencyLang + '.'+key, values); 
    } 


    private static getInstance() { 
     if(Lang.instance == null) Lang.instance = new Lang(); 
     return Lang.instance; 
    } 

} 

例如英寸/en.ts我有：

export const en = { 
    routing : { 
     login: 'login', 
     clients: 'my-clients', 
     projects: 'my-projects', 
     "project.pages": 'my-projects/%{project_id}/pages', 
     ... 
    } 

    login : "Login" 
    .... 
} 

和其他語言類似。

===編輯：AOT支持===

我注意到aboce溶液（URL類）不與AOT合作。在angular-starter使用命令npm run build:aot我們會看到以下錯誤：

Error: Error encountered resolving symbol values statically. Calling function 'Url', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol ROUTES in...

因爲AOT編譯app.routes.ts文件使用metadata js subset編譯。所以，下面我給的解決方案命名路由（帶參數）writen使用compatibile與AOT JS集：

export class Url { 

    public static to(routingName: string, values?: any) { 

     return { 
      'clients' : 'favourite-clients/' + values['client_id'], 
      'projects' : 'projects/' + values['project_id'] + '/best', 
      ... 
     }[routingName]; 
    } 

} 

可能是在app.routes.ts及以上Url.to方法使用一些技巧將是更多鈔票也對將multilang與AoT兼容。