Angular 2 路由中如何动态更改基本 URL？

Question

目前，我的项目中已经设置了路由。每个新用户都会被重定向到：

localhost:4200/default-path/login

一旦用户登录，他们将被重定向到主页模块，该模块有一些子路由供用户导航。

localhost:4200/default-path/home
localhost:4200/default-path/home/account
localhost:4200/default-path/home/account/profile
localhost:4200/default-path/home/dashboard

...等等。

现在，粗体部分已经在主页模块中设置好了，不需要进一步编辑。但是，我想将 default-path 更改为其他内容。

假设每个用户都属于三个项目之一：蓝色、红色或绿色项目。这些信息仅在用户提交凭据并点击登录按钮后才可用。

我想要的是，在登录后，路由应该是：

localhost:4200/project-blue/home
localhost:4200/project-red/home
localhost:4200/project-green/home

请注意，粗体部分不是具有不同关联组件的不同模块，它们只是我想在URL中看到的常量。

目前，我的索引中的 <base> 标签类似于 <base href='/'>，我正在尝试编辑此属性。我得到的是：

processLoginSuccess(loginTicket): void {
    const routeName = loginTicket.baseUrl // returns 'project-red'
    let b = document.getElementsByTagName('base')[0]
    b.setAttribute('href', routeName )

    this._router.navigate(['/home']);
}

但是这似乎并不起作用。

有什么想法吗？

- Snowman

---

https://dev59.com/O1oU5IYBdhLWcg3wK0pX#38096468 - Günter Zöchbauer

@GünterZöchbauer：看起来这会重置子路由的配置。我需要编辑我的基本URL。我可以用resetConfig做到吗？ - Snowman

不，我认为没有办法修改基本URL。 - Günter Zöchbauer

我认为可以在路由配置中为项目路由的子路由设置动态路由链接。 - Vishal

@vishal：听起来不错。你有一个链接、plunker或者其他我可以参考的东西吗？ - Snowman

const projectsRoutes: Routes = [ { path: '', component: ProjectsComponent, children: [ { path: ':projectName/home', component: ProjectHomeComponent } ] } ];（代码示例，无法直接翻译） - Vishal

Answer 1

不需要设置 base 元素的 href 值，你可以通过使用自定义操作为 APP_BASE_HREF 提供基本 URL，以此来动态设置。

这个问题已经在这里讨论过了：https://dev59.com/RloT5IYBdhLWcg3w2CQw#41674411

- Krishnan