代码之家 › 专栏 › 技术社区 › lonix

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

angular-routing typescript angular

lonix · 技术社区 · 7 年前

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

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

一些选择:

我可以在那个配置类上使用静态属性,但这是一种攻击,而且更难测试。
我能行 const config = new Configuration(); 并将其用于 routes 如上所述——但如果它也需要成为IOC容器的一部分,因为它有自己的依赖项,该怎么办?
@denispupyrov的答案是:使用枚举。但与选项2一样,这意味着字符串必须在一个地方编码,而不需要依赖项(即无DI)。

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

0 回复 | 直到 7 年前

Denis Pupyrev 7 年前

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

路线。ts

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

应用程序路由。单元ts

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

UPD:

如果您需要DI,您可以使用特殊服务:

路线服务ts

@Injectable()
export class RouteService {
  routes = {};

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

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

  get ROUTES() {
    return this.routes;
  }
}

任何组成部分ts

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

推荐文章

j-p · 角度5,使用子模块中的组件

8 年前

Felipe Micali · 输入父管线角度5时导航到上次访问的子管线

8 年前

Matt Eland · 角度2+-我可以发出一个指令来使用路由器导航吗?

8 年前

Burst of Ice · 未找到直接浏览时的角度布线

8 年前

Wai Yan Hein · 子模块的角度5布线不工作

8 年前

Plochie · SVG模式在Safari中不起作用

8 年前

Sathya V · 路线导航时角度组件属性未重置

8 年前

Mujahid · 角度路由器中的Scrollspy效应

8 年前

Musical Coder · URL更改不以角度触发

8 年前

JSON · 如何将子组件设置为路由器出口的默认路由?[副本]

8 年前