Angular2 Uygulama kök yolunu html temel URL'sinden bağımsız olarak ayarlama

Herhangi bir içerik sayfasına eklenebilir bir eklenti olarak TYPO3 içine gömülecek bir angular2 uygulaması/widget'ı yapıyorum. Bu zaten TYPO3 tarafından ayarlanır farklı kök yolları ör .:Angular2 Uygulama kök yolunu html temel URL'sinden bağımsız olarak ayarlama

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

küresel baz url (temel href = ..) en bitebileceğini ve değiştirilemez anlamına gelir. Rotalarını doğru bir şekilde oluşturabilmesi için bir çeşit kök önek nasıl açabilirim? https://angular.io/docs/ts/latest/guide/router.html

kaynak

2016-10-12 jdachtera

Aslında açısal belgelerde bir çözüm var, ancak bulunması oldukça zor. Taban url'yi <base> etiketi kullanmadan köşeli olarak ayarlamak mümkündür.
Bu yüzden, temel URL'yi sıvı kullanarak genel bir JavaScript değişkenine ayarlamanız ve ardından uygulama modülünde açısal olarak ayarlamanız gerekir.

Akışkan:

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

Açısal: Bu durumda APP_BASE_HREF de

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

kaynak

2016-10-20 11:16:26 jdachtera

Bu yanıtı gönderdiğiniz için teşekkürler – CBA

nedeni web sunucusu zaten URL'yi işleyen ve böylece Angular2 yönlendirme delege değil olmasıdır: Burada belgelendiği gibi

Yeni yönlendirici kullanıyorum. Bunu aşmak için, Angular içinde farklı bir LocationStrategy kullanmalısınız.

Ne /page1/app/ web sunucu hizmet verecektir /page1/app/#/angular-controller/ ve /angular-controller/ gibi yolları oluşturmak için HashLocationStrategy denir arıyorsanız sizin Angular2 uygulama mantığına ilk argümandır.

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

bu konuda Angular2 documentation daha fazla ayrıntı (örneğin yanı oradan alınmıştır) bulun modül beyanı (örn app.module.ts) ayarlayın.

kaynak

2016-10-12 08:45:04

Örnekler, hala RC düzeyindeyseniz, Angular 2.0'a dayanmaktadır, ilk önce yükseltmeyi düşünün. Örneğin RC4 ve final arasında çok değişti. –

Cevabınız için teşekkürler, ancak gerçekten "gerçek" URL'leri kullanmak istiyorum. Aslında varsayılan Strateji ile çalışan bir çözüm buldum ve burada yayınlayacağım. – jdachtera

baseURL config özniteliğini kullanmamanızı tavsiye ederim. Biraz modası geçmiş ve sizinki gibi bazı sorunlara yol açıyor.

Sen

config.absRefPrefix =/

ayarlayabilirsiniz Tüm bağlantılar/şimdi ile başına eklenecektir ve aynı zamanda çalışacaktır.

kaynak

2016-10-12 21:55:03

TYPO3 7.6'dan bu yana, uyumlu yolun otomatik olarak yapılandırıldığı 'config.absRefPrefix = auto' kullanmak mümkündür. Ancak, bu tek başına Angular2 yönlendirme ile sorunu çözmez. –

Teşekkürler, ama bunun benim problemimi çözeceğini sanmıyorum. Ayrıca bu TYPO3 yüklemesi oldukça eski ve bu kurulumu değiştiremiyorum. – jdachtera

Bak, temelde Angular2 ve yukarıdaki, şöyle sağlayıcı geçersiz kılabilirsiniz Bu, bu casusu gösteren Angular.io örneğidir e: ayrı ayrı her bir modül için bunu yapabilir böylece

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

Yani bu durumda APP_BASE_HREF Bu sadece Açısal uygulama içinde geçerlidir .../my/app yerini alacaktır ...

Eğik doküman üzerinde bu sayfalarda bakarak daha fazla bilgi için

: Ben değişken bir hata aldınız açısal en son sürümlerinde

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

kaynak

2017-04-08 03:35:25 Alireza

, bu yüzden bir DATA- kullanmak yerine

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

Eğik bağlıyor:

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 {}

kaynak

2018-02-22 09:46:31 user1169849

Angular2 Uygulama kök yolunu html temel URL'sinden bağımsız olarak ayarlama

cevap

İlgili konular