将角度路由的路径提取到单独的文件中

Posted 2023-02-19

角度路由通常定义和使用如下：

const routes: Routes = [
   path: "register", component: RegisterComponent ,
   path: "login", component: LoginComponent ,
  // more...
];

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

我不想将路由移动到单独的文件 - 我只想移动路径。

所以我想提取"register"和"login"魔术字符串并将它们放在某处，然后执行此操作：

const routes: Routes = [
   path: config.routes.register, component: RegisterComponent ,
   path: config.routes.login, component: LoginComponent ,
  // more...
];

我有一个Configuration类我添加到DI，我将它注入任何我需要的地方。如果可能的话，我想在那里添加路径。

一些选择：

1. 我可以在该配置类上使用静态属性，但这是一个黑客，更难测试。
2. 我可以做const config = new Configuration();并在上面的routes中使用它 - 但如果它也需要成为IOC容器的一部分，因为它有自己的依赖项呢？
3. 来自@ DenisPupyrev的回答：使用枚举。但是与选项2一样，这意味着字符串必须在一个地方编码而不需要依赖（即没有DI）。

所有这些都是不错的选择。但是提取魔术弦的最简洁方法是什么，还使用DI？

答案

在TypeScript中，您有很好的机会使用“枚举”。

Routes.ts

export enum Routes 
  LOGIN = 'login',
  REGISTER = 'register',
  ...

APP-routing.module.ts

import  Routes  from './path/to/Routes';
...
 path: Routes.LOGIN, component: LoginComponent 

UPD：

如果您需要DI，您可以使用特殊服务：

route.service.ts

@Injectable()
export class RouteService 
  routes = ;

  constructor() 
    this.addRoute('login');
  

  addRoute(route: string) 
    this.routes[route] = route;
  

  get ROUTES() 
    return this.routes;
  

any.component.ts

import  RouteService  from './path/to/route.service';
...
constructor(private routeService: RouteService) 
...
anyMethod() 
  this.routeService.ROUTES.login;