Angular 4/5 - 动态更改基本 href答案

【问题标题】：Angular 4/5 - Change base href dynamicallyAngular 4/5 - 动态更改基本 href
【发布时间】：2023-03-22 11:31:01
【问题描述】：

我正在使用 Ex URL：“https://example.com/{portalID}/Login”开发多租户应用程序，其中portalID 将客户更改为客户。所以初始登录看起来像这样。
https://example.com/portalId/Login
在登录页面中，我有一个文本框和一个按钮。所以文本框接受portalId和onclick，我想在不重新加载页面的情况下更改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 设置为基本 href 的一部分。现在使用测试框我想覆盖该值。

对于客户端 1：所以初始 URL 是https://example.com/portalId/Login"。当我在文本框中输入任何数字时，URL 应更改为例如：https://example.com/21/Login 我存储在会话存储中的门户和 JWT 令牌。登录成功后，每个路由都必须有portalID。像这样的东西 https://example.com/21/home

对于 Client2：在新窗口中（现在 PortalId 为 45）网址是https://example.com/45/Login 在这里，portalID 和 JWT 令牌也保存在会话存储中。登录成功后，每个路由都必须有portalID。像这样的东西 https://example.com/45/home

【问题讨论】：

你可以用路由来实现不是吗？
@PardeepJain 该应用程序是多租户的，如何在不重新加载页面的情况下为多个客户动态设置基本 href 值。注意：我可以动态设置值，但实际上是在重新加载页面。
@user1985943 回答了我的问题，回答了你的问题？
@PatricioVargas 感谢您提供信息，但您的回答是在路由中传递动态值。但我想要实现的是根据客户更改基本 href 值如果我的问题令人困惑，请告诉我。以便我重新审视我的问题。
@user1985943 所以你正在尝试这样做，例如：<a href=" https://example.com/45/Login"></a> 并将其更改为<a href=" https://example.com/76/Login"></a>，它实际上会将你带到 76 而不是 45 的页面？

标签： angular angular-cli angular5

【解决方案1】：

这必须使用路由来完成。遵循本教程：https://www.learnhowtoprogram.com/javascript/angular-extended/dynamic-routing-navigation。您必须在代码中设置要导航到的路线。例子： this.router.navigate([**DyanamicPortalID**, 'Login']);

【讨论】：