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 пишет: (name) "... не присваивается типу 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 маршрутизаторе (которые не поддерживают его) (основная идея от проверяемого ответа - @Michael Робисона):

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

} 

И каждый, где в вашем проекте в lin 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" 
    .... 
} 

И аналогичный для других языков.

=== EDIT: AoT поддержка ===

Я заметил, что aboce решение (URL-класс) не сотрудничает с АОТ. С помощью команды npm run build:aot в angular-starter мы увидим ниже ошибки:

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. Поэтому ниже я даю решение для именованных маршрутов (с параметрами), используя прописан с АОТ совместит подмножество: расслоение плотной

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 будет также Возможным включить многоканальный совместимый с AoT.