web-dev-qa-db-ja.com

Angular2 htmlベースURLから独立してアプリのルートパスを設定する方法

任意のコンテンツページに挿入できるプラグインとしてTYPO3に埋め込まれる、angular2アプリケーション/ウィジェットを構築しています。これは、次のような異なるルートパスで終わる可能性があることを意味します。

/page1/app
/page/subpage/subpage/whatever

グローバルベースURL（base href = ..）は既にTYPO3によって設定されており、変更できません。ルートを正しく構築できるように、どうすればangular何らかのルートプレフィックスを付けることができますか？

ここに記載されている新しいルーターを使用しています： https://angular.io/docs/ts/latest/guide/router.html

angulartypo3angular2-router3
7
jdachtera

実際にはangular docsに解決策がありますが、見つけるのはかなり困難です。<base>タグを使用せずに、ベースURLをangularに設定することができます。
したがって、ベースURLをフルードを使用してグローバルJavaScript変数に設定し、アプリモジュールでangularに指定するだけです。

流体：

<script>
   var app_base_url = '<f:uri.page pageUid="{currentPageUid}" />';
</script>

角度：

declare var app_base_url;

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue:app_base_url}]
})
class AppModule {}

https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

14
jdachtera

baseURL config属性を使用しないことをお勧めします。それは少し時代遅れであり、あなたのようないくつかの問題につながります。

設定できます

config.absRefPrefix = /

すべてのリンクの先頭に/が追加され、機能します。

2
Dimitri L.

angularの最新バージョンでは、変数に関するエラーが発生するため、代わりにデータ属性を使用します

<body data-base-url="whatever/"> ...

角度：

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue:documnent.body.dataset.baseUrl}]
})
class AppModule {}
1
Simsteve7

その理由は、Webサーバーが既にURLを処理しているため、Angular2ルーティングに委任されていないためです。これを克服するには、Angularで別のLocationStrategyを使用する必要があります。

探しているものはHashLocationStrategyと呼ばれ、/page1/app/#/angular-controller/ どこ /page1/app/はWebサーバーから提供され、/angular-controller/は、Angular2アプリケーションロジックの最初の引数です。

モジュール宣言を調整します（例：app.module.ts）

import {Component, NgModule} from '@angular/core';
import {
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';
@NgModule({
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}

詳細については、 Angular2 documentation をご覧ください（例もそこから取られました）。

1
Oliver Hader

この場合のAPP_BASE_HREFを見てください。基本的にはAngular2以降で、このようにプロバイダーをオーバーライドできます。これはこの例を示すAngular.ioの例です。

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

その場合、APP_BASE_HREFは/ my/appに置き換えられるため、各モジュールに対して個別に実行できます...これはAngular application ...

詳細については、Angular doc：

https://angular.io/docs/ts/latest/api/common/index/PathLocationStrategy-class.html

https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

0
Alireza