BinaryDevelop
  1. ホーム
  2. angular

[解決済み] Angular 2+ - ベースのhrefを動的に設定する

2022-04-25 11:33:04

質問

クライアントにAngular 2を使用した企業向けアプリがあります。顧客はそれぞれ独自のURLを持っており、例． 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...> に設定されます。 /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 ファイルに { 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 { }

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します