Question

是否有任何内置功能或流行的库可以避免在视图中使用硬编码网址？也许有一个库可以反转Routes对象并为它们生成类型安全的构建器？

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

硬编码的网址很难支持，你不能在一个地方改变它，所以它随处变化
尽管应用程序具有Routes数组且可能在编译/启动时检查所有内容，但未检查硬编码的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>

您的目标

通过这种方式，您可以实现两个目标：

您可以在一个位置更改变量值（routes.ts 文件）。
您只使用您在routes.ts中定义的路线文件。这样，路线将始终有效。

Angular5反向路由

1 个答案: