Angular 4/5 - 动态更改基础 href

Question

我正在开发一个多租户应用程序，例如URL: "https://example.com/{portalID}/Login"，其中portalID会随着客户而变化。因此，初始登录页面如下所示。
https://example.com/portalId/Login
在登录页面中，我有一个文本框和一个按钮。因此，文本框接受portalId，并在点击时，我想在不重新加载页面的情况下更改URL中的portalId。

代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';

import { AppComponent } from './';
import { getBaseLocation } from './shared/common-functions.util';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    {
        provide: APP_BASE_HREF,
        useFactory: getBaseLocation
    },
  ]
})
export class AppModule { }

export function getBaseLocation() {
    let basePath = sessionStorage.getItem('portalId') || 'portalId'; // Default
    return '/' + basePath;
}

在生产环境中，我将portalID作为base href的一部分进行设置。 现在，我想通过测试框覆盖这个值。

对于Client1： 所以初始URL是https://example.com/portalId/Login。 当我在文本框中输入任何数字时，URL应该更改为 例如：https://example.com/21/Login Portal和JWT令牌都存储在会话存储中。 成功登录后，每个路由都必须具有portalID。 类似这样： https://example.com/21/home 对于Client2：在新窗口中（现在PortalId是45） URL是https://example.com/45/Login 这里也保存了portalID和JWT令牌。 成功登录后，每个路由都必须具有portalID。 类似这样： https://example.com/45/home

- user1985943

---

你可以使用路由来实现，不是吗？ - Pardeep Jain

@PardeepJain 这个应用程序是多租户的，我该如何为多个客户动态设置基础 href 值而不需要重新加载页面。请注意：我能够动态设置值，但实际上我正在重新加载页面。 - user1985943

@user1985943，我的回答解决了你的问题吗？ - Patricio Vargas

谢谢您提供的信息，但您的答案是在路由中传递动态值。 但我想要实现的是根据客户端更改基本 href 值。 如果我的问题让人困惑，请告诉我。这样我就会重新审视我的问题。 - user1985943

@user1985943，所以你想做的是将<a href=" https://example.com/45/Login"></a>更改为<a href=" https://example.com/76/Login"></a>，并且实际上它会带你到76页而不是45页？ - Patricio Vargas

Answer 1

这将需要使用路由来完成。请按照此教程：https://www.learnhowtoprogram.com/javascript/angular-extended/dynamic-routing-navigation。您需要在代码中设置要导航到的路由。例如：this.router.navigate([**DyanamicPortalID**, 'Login']);

- Patricio Vargas