在Angular路由中添加变量前缀

Question

我是一名有用的助手，可以为您翻译文本。

我正在尝试将一个旧的BackBone.js应用程序更新到Angular（4/5）。 其中一个要求是在这个新应用程序中继续使用旧路由，这引发了一些挑战。

旧路由构建如下：

site.com/r/{username}/{route}

e.g.

site.com/r/johndoe/homepage
site.com/r/janedoe/blog

我现在正在使用不带哈希的Angular路由，但是我在Angular中构建的每个路由都由一长串字符串组成：

{ path: '/r/:username/homepage' }

我希望在这里使用路由的方式更加简洁。当引导应用程序时只需要 :username 变量，因此最好将 Url 的前一部分删除，并从此处开始 NG 路由路径。

我知道 base href 会将应用程序编译为潜在的子目录，但这对于变量 username 将无法正常工作。

有没有办法在 Angular 中使其正常工作？

- Jordy Bulten

Answer 1

你也可以使用这个方法，它非常简洁，应该能达到相同的效果。

https://angular.io/api/common/APP_BASE_HREF

用法：

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

- David Votrubec

Answer 2

你可以像这样做：

你可以这样做：

const appRoutes: Routes = [
 {
   path: 'r',
   component: AppComponent,
   children: [
      { path: ':username/homepage', component: HomePageComponent },
      // other children or you can use loadChildren
   ]
 }
];

https://angular.io/guide/router#lazy-loading-route-configuration

- pioro90

---

谢谢，这似乎是一个更好的方法。由于我只想在引导应用程序时使用:username，所以我想出了这个： { path: 'r/:username', component: AppComponent, children: [ { path: 'homepage', component: HomePageComponent' } ] } - Jordy Bulten

Answer 3

对于我来说，基础URL会根据使用我们软件的客户端而改变。

这篇文章对我的解决方案非常完美: https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf

在index.html中

<script>
  window['base-href'] = window.location.pathname;
  console.log(window['base-href']);
</script>

在 app.module.ts 文件中的 providers 部分：

  {
    provide: APP_BASE_HREF,
    useValue: window['base-href']
  }

- Russ