使用 Angular 构建相同项目的两个变体

Question

我正在开展一个项目，该项目需要创建同一网站的两个变体（男性和女性） 这两个项目必须各自在不同的路径中，第一个www.website.com/male/somelink 和第二个www.website.com/female/somelink

这两个网站必须是完全一样的，除了一些必须不同的东西，比如颜色、从 API 检索到的数据，或者男性的某些特定路线或女性的某些特定路线 为了保持我的代码干净和一致，我尝试找到与两个项目共享尽可能多的代码的最佳解决方案，但我找不到共享所有这些代码并保持大部分共同点的解决方案

我读过this article，但我对这种方法的问题是它不可能有共同的路线，即使我决定在根项目中创建我的组件服务并在路线，我也无法在我的代码中知道我在哪个部分（男性或女性）

我也想过创建两个不同的构建，并在代码中使用环境变量来定义男性或女性的条件，但是在这个使用中，我没有看到如何隔离部分路由（路由必须是通用的和其他具体）

有人可以帮我找到最佳解决方案吗？

谢谢！

Answer 1

可以通过路由参数来实现。

将此插入您的app-routing.module.ts。

const routes: Routes = [
     :
    {path: ':gender/somelink', component: SomeLinkComponent},
]

在SomeLinkComponent.ts，这样做。

  public gender = this.route.snapshot.paramMap.get('gender');

  constructor(
    private route: ActivatedRoute,
  ) { }

那么你应该使用gender 值来实现你的逻辑。