Angular2 命名路由

Question

我使用 Angular2 Webpack Starter在 this newest version并在文件 ./src/app/app.routes.ts 中添加“my-new-route”，我想将其命名为:“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(路由类)中没有“名称”字段。那么如何在 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(...) 方法(在 Controller 中 make 方法 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 编译的。因此，下面我给出了使用与 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 方法中使用一些技巧，也可以将多语言与 AoT 兼容。