时间戳

首页 > 解决方案 > Angular 路由动态显示虚路由前缀

angular - Angular 路由动态显示虚路由前缀

问题描述

我有一个多租户应用程序，被分割成多个“门户”

在应用程序加载时，我们联系数据库并匹配 url 以找到我们应该是哪个门户。因此http://www.mywebsite.com/customerA，为应用程序设置了一些内幕。

const portal: Portal = await this.templateService.addressLookup(url);

然后我们每个门户都有一个默认路由，我试图通过

this.router.navigateByUrl(portal.routeTo, { skipLocationChange: true });

这很好用，带我去新的路线。

我想要完成的不是导航到http://www.mywebsite.com/route我希望用户http://www.mywebsite.com/customerA/route在 URL 栏中看到，而是将应用程序中的路由解析为http://www.mywebsite.com/route

-- 我想我可以手动设置网址，但我不知道如何处理这个

解释它是如何设置的：

1) 用户http://www.mywebsite.com/customerA在应用程序加载时访问数据库并说“好的，你是 customerA，转到默认路由 /defaultRoute”。

2) 我们设置了一个内部上下文来保存portalId 以驱动一些功能，并包含在所有API 调用中。

3）现在我想路由到http://www.mywebsite.com/customerA/defaultRoute，但有角度路由器实际上将它解析为 /defaultRoute

标签： angular

解决方案

似乎您需要的是Base URL。它是您通常<base>在 HTML 中设置标签的 URL，<head>它的作用类似于应用程序中所有相对链接的原始路径。

将此函数放在您的 index.html 中，以便在每个应用程序启动时运行（方法取自此处，只需添加您自己的逻辑来根据地址栏中的 URL 确定基本 URL）：

<base href="/">
<script>
  (function() {
    window['_app_base'] = //your logic to determine a base from the current URL;
  })();
</script>

之后，在你的 App.module 中，让 Angular 知道它（注意提供者）：

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: [
    {
        provide: APP_BASE_HREF,
        useValue: window['_app_base'] || '/'
    },
  ]
})
export class AppModule { }

如果您需要在应用程序的某个地方获取它，请使用以下命令：

import { APP_BASE_HREF } from '@angular/common'; 

...

constructor(@Inject(APP_BASE_HREF) private baseHref:string) {
  console.log(this.baseHref);
}

推荐阅读