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

时间:2019-03-02 08:13:28

标签: angular typescript angular-routing

角形路线通常是这样定义和使用的:

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. 我可以在该配置类上使用静态属性,但这是一个hack,更难测试。
  2. 我可以做const config = new Configuration();并像上面一样在routes中使用它-但是如果它还需要成为IOC容器的一部分,因为它具有自己的依赖性,该怎么办?
  3. 来自@DenisPupyrev的答案:使用枚举。但是像选项2一样,这意味着字符串必须在一个位置编码而无需依赖项(即没有DI)。

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

1 个答案:

答案 0 :(得分:1)

在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;
}