动态设置基础href – 角度2

前端之家收集整理的这篇文章主要介绍了动态设置基础href – 角度2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们有一个企业应用程序,客户端使用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…perfect!

问题是如果用户例如在https://our.app.com/customer-two/another-page,并刷新该页面或尝试直接点击该网址,< base href ...>被设置为/ 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>

...

不幸的是,我们是新鲜的想法。任何帮助将是惊人的。

这是我们最后做的。

将其添加到index.html。应该是< head>中的第一件事部分

<base href="/">
<script>
  (function() {
    window['_app_base'] = '/' + window.location.pathname.split('/')[1];
  })();
</script>

然后在app.module.ts文件中,添加{提供: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 { }
原文链接:https://www.f2er.com/angularjs/144878.html

猜你在找的Angularjs相关文章