猿问

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
浏览 2029回答 3
3回答

jeck猫

这就是我们最终做的事情。将其添加到index.html。它应该是该<head>部分的第一件事<base&nbsp;href="/"><script> &nbsp;&nbsp;(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;window['_app_base']&nbsp;=&nbsp;'/'&nbsp;+&nbsp;window.location.pathname.split('/')[1]; &nbsp;&nbsp;})();</script>然后在app.module.ts文件中，添加{ provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }到提供程序列表，如下所示：import&nbsp;{&nbsp;NgModule,&nbsp;enableProdMode,&nbsp;provide&nbsp;}&nbsp;from&nbsp;'@angular/core';import&nbsp;{&nbsp;BrowserModule&nbsp;}&nbsp;from&nbsp;'@angular/platform-browser';import&nbsp;{&nbsp;APP_BASE_HREF,&nbsp;Location&nbsp;}&nbsp;from&nbsp;'@angular/common';import&nbsp;{&nbsp;AppComponent,&nbsp;routing,&nbsp;appRoutingProviders,&nbsp;environment&nbsp;}&nbsp;from&nbsp;'./';if&nbsp;(environment.production)&nbsp;{ &nbsp;&nbsp;enableProdMode();}@NgModule({ &nbsp;&nbsp;declarations:&nbsp;[AppComponent], &nbsp;&nbsp;imports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;BrowserModule, &nbsp;&nbsp;&nbsp;&nbsp;HttpModule, &nbsp;&nbsp;&nbsp;&nbsp;routing], &nbsp;&nbsp;bootstrap:&nbsp;[AppComponent], &nbsp;&nbsp;providers:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;appRoutingProviders, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;provide:&nbsp;APP_BASE_HREF,&nbsp;useValue:&nbsp;window['_app_base']&nbsp;||&nbsp;'/'&nbsp;}, &nbsp;&nbsp;]})export&nbsp;class&nbsp;AppModule&nbsp;{&nbsp;}
0
随时随地看视频慕课网APP

相关分类

AngularJS
我要回答