angular - 将 Angular 路由的路径提取到单独的文件中

Question

Angular 路由通常是这样定义和使用的:

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 中，并在需要的地方注入(inject)它。如果可能的话，我想在那里添加路径。

一些选项:

1. 我可以在该配置类上使用静态属性，但这是一种黑客行为，而且更难测试。
2. 我可以像上面那样执行 const config = new Configuration(); 并在 routes 中使用它 - 但如果它也需要成为 IOC 容器的一部分怎么办？它有自己的依赖项吗？
3. 摘自@DenisPupyrev 的回答:使用枚举。但与选项 2 一样，这意味着字符串必须在一处编码，而不需要依赖项(即无需 DI)。

所有这些都是不错的选择。但是提取魔法字符串并使用 DI 的最干净的方法是什么？

Answer 1

在 TypeScript 中，你有很好的机会使用“Enums”。

Routes.ts

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

app-routing.module.ts

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

更新:

如果您需要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;
}