Angular5反向路由

Question

是否有任何内置特性或流行库允许在视图中避免硬编码urls？也许有一个库可以反向路由对象并为它们生成类型安全的构建器？

我需要这样的功能有两个原因：

1. 硬编码的url很难支持，您不能在一个地方更改它，所以它在任何地方都会改变。
2. 硬编码的url没有检查正确性，尽管应用程序有路由数组，并且可能在编译/启动时检查所有内容。

Answer 1

如果你想要这样的东西，那你自己做就很容易了。您可以将路由导出为常量，并将其导入到您想要使用的任何地方。

步骤1

创建一个名为routes.ts的文件，在该文件中导出路由：

export const HOME = 'home';
export const ABOUT = 'about';
export const CONTACT = 'contact';

步骤2

在您想要使用这些路由的任何地方导入您的routes.ts文件，并参考您的路由：

import * as routes from './routes';

例1 app.routing.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import * as routes from './routes';

const routes: Routes = [
  {
    path: routes.HOME,
    component: HomeComponent
  },
  {
    path: routes.ABOUT,
    component: AboutComponent
  },
  {
    path: routes.CONTACT,
    component: ContactComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

示例2 home.component.ts和home.component.html：

将routes.ts文件导入到home/about/contact.component.ts中。

然后在home/about/contact.component.html内部参考变量：

<a [routerLink]="routes.HOME">Home</a>
<a [routerLink]="routes.ABOUT">About</a>
<a [routerLink]="routes.CONTACT">Contact</a>

你的目标

这样你就能实现你的两个目标：

1. 您可以在一个地方( routes.ts文件)更改变量值。
2. 您只使用在routes.ts文件中定义的路由。那样的话，路线就会一直正常工作。