Angular 2/4/5 - 动态设置基本href
Angular 2/4/5 - 动态设置基本href
我们有一个企业应用程序，它为客户端使用Angular 2。我们每个客户都有自己独特的网址，例如：https://our.app.com/customer-one和https://our.app.com/customer-two。目前我们可以<base href...>动态设置document.location。所以用户点击https://our.app.com/customer-two并<base href...>设置为/customer-two......完美！
问题是，如果用户是例如，https://our.app.com/customer-two/another-page并且他们刷新页面或尝试直接点击该URL，则<base href...>设置为get /customer-two/another-page并且找不到资源。
我们尝试了以下无济于事：
<!doctype html><html><head>
<script type='text/javascript'>
var base = document.location.pathname.split('/')[1];
document.write('<base href="/' + base + '" />');
</script>...不幸的是，我们的想法很新鲜。任何帮助都会很棒。
慕桂英546537浏览 2086回答 3
3回答
-
jeck猫
这就是我们最终做的事情。将其添加到index.html。它应该是该<head>部分的第一件事<base href="/"><script> (function() { window['_app_base'] = '/' + window.location.pathname.split('/')[1]; })();</script>然后在app.module.ts文件中，添加{ provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }到提供程序列表，如下所示：import { NgModule, enableProdMode, provide } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { APP_BASE_HREF, Location } from '@angular/common';import { AppComponent, routing, appRoutingProviders, environment } from './';if (environment.production) { enableProdMode();}@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, HttpModule, routing], bootstrap: [AppComponent], providers: [ appRoutingProviders, { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }, ]})export class AppModule { }
随时随地看视频慕课网APP
相关分类
AngularJS