Angular 6中如何通过常量TypeScript文件管理路由路径并在HTML中引用？

我来帮你搞定这个问题！用常量统一管理路由路径能彻底解决硬编码的维护痛点，下面是具体实现步骤：

1. 创建路由常量文件 #

首先在你的项目里新建一个专门的常量文件，比如src/app/app-routing.constants.ts，把所有路由路径都定义在这里：

// app-routing.constants.ts
export const ROUTES = {
  DASHBOARD: '/dashboard',
  HOME: '/home',
  // 后续新增的路由都可以在这里扩展
};

你也可以根据习惯选择不带开头斜杠的写法（比如DASHBOARD: 'dashboard'），后续在模板里配合['/', routes.DASHBOARD]使用就行，两种方式都没问题。

2. 在组件中引入常量并暴露给模板 #

打开home.component.ts，先导入刚才的常量，然后把它赋值给组件的一个公共属性，这样模板就能访问到：

// home.component.ts
import { Component } from '@angular/core';
import { ROUTES } from '../app-routing.constants'; // 注意路径要和你的文件位置匹配

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  // 把常量暴露给模板
  public routes = ROUTES;
}

3. 在HTML模板中引用常量 #

现在把原来的硬编码路由替换成组件里的常量即可：

<!-- home.component.html -->
<a id="routeDashboard" [routerLink]="[routes.DASHBOARD]">Dashboard</a>

4. 进阶优化：路由配置也使用常量（推荐） #

为了让整个项目的路由路径完全统一，避免出现配置和模板路径不一致的情况，你可以在app-routing.module.ts里也引用这个常量：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ROUTES } from './app-routing.constants';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  // 如果常量里带斜杠，这里用replace去掉开头的/
  { path: ROUTES.DASHBOARD.replace('/', ''), component: DashboardComponent },
  { path: ROUTES.HOME.replace('/', ''), component: HomeComponent },
  // 懒加载路由也可以这么用
  // { path: ROUTES.ADMIN, loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

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

这样一来，以后要修改路由路径，只需要在app-routing.constants.ts里改一处，所有引用的地方都会自动更新，再也不用到处找硬编码的路径啦！

内容的提问来源于stack exchange，提问作者Ashish Kumar