Question

我在Webpack Starter和文件./src/app/app.routes.ts中使用Angular2 this newest version我添加了我的新路线＆＃39;我想把它命名为：＆＃34; my.route＆＃34;

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写道:(名称）＆＃34; ...不能分配给Route []＆＃34;类型。我检查文件node_modules/@angular/router/config.d.ts（在index.d.ts中指出）确实 - 没有＆＃39;名称＆＃39; RouterConfig（Route类）中的字段。那么如何在Angular2中做命名路由？

Answer 1

有一种方法可以在新的Angular2路由器（不支持它）中使用命名路由（主要思想来自已检查的答案 - @Michael Robison）：

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

}

您项目中链接的每个位置都必须使用Url.to(...)方法（在控制器中制作调用Url.to的方法links(route)，并在模板中使用它...）。以上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，我们会看到以下错误：

错误：静态解析符号值时出错。调用函数'Url'，不支持函数调用。考虑更换函数或lambda引用导出的函数，在...中解析符号ROUTES

因为在AoT编译中，app.routes.ts文件是使用metadata js subset编译的。所以下面我给出了使用与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结合使用。

Answer 2

RC.3是最新的Angular2版本，新的路由器V3-alpha7不支持名称。名称已删除，因为它没有延迟加载路线。

Answer 3

我只需使用ng2-translate并为您的JSON文件中的每种语言创建链接。

Angular2命名路由

3 个答案: