2016-10-12 20 views
5

से स्वतंत्र रूप से ऐप रूट पथ कैसे सेट करें I एक कोणीय 2 एप्लिकेशन/विजेट का निर्माण कर रहा हूं जिसे TYPO3 में प्लगइन के रूप में एम्बेड किया जाएगा जिसे किसी भी सामग्री पृष्ठ पर डाला जा सकता है। यह बात अलग रूट पथ उदा .:कोणीय 2 एचटीएमएल बेस यूआरएल

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

वैश्विक आधार यूआरएल (आधार href = ..) पहले से ही typo3 द्वारा निर्धारित है पर लग सकती है और बदला नहीं जा सकता है। मैं कुछ प्रकार के रूट उपसर्ग को कोणीय कैसे दे सकता हूं ताकि यह अपने मार्गों को सही तरीके से बना सके?

मैं नए रूटर उपयोग कर रहा हूँ के रूप में यहाँ प्रलेखित: https://angular.io/docs/ts/latest/guide/router.html

उत्तर

10

वास्तव में कोणीय दस्तावेज़ों में एक समाधान है लेकिन यह खोजना बहुत मुश्किल है। <base> टैग का उपयोग किए बिना बेस यूआरएल को कोणीय में सेट करना संभव है।
तो आपको तरल पदार्थ का उपयोग करके एक वैश्विक जावास्क्रिप्ट चर पर बेस यूआरएल सेट करना होगा और फिर इसे ऐप मॉड्यूल में कोणीय प्रदान करना होगा।

द्रव:

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

कोणीय: इस मामले में APP_BASE_HREF पर

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

+1

इस उत्तर को पोस्ट करने के लिए धन्यवाद – CBA

1

कारण यह है कि अपने वेब सर्वर पहले से ही यूआरएल से निपटने है और इस तरह यह Angular2 मार्ग को प्रत्यायोजित नहीं किया गया है। इसे दूर करने के लिए, आपको कोणीय में एक अलग LocationStrategy का उपयोग करना होगा।

क्या आप के लिए HashLocationStrategy कहा जाता है /page1/app/#/angular-controller/ जहां /page1/app/ वेब सर्वर से परोसा जाता है और /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 में अधिक जानकारी के लिए (उदाहरण के रूप में अच्छी तरह वहाँ से लिया गया है) का पता लगाएं।

+0

उदाहरण एंगुलर 2.0 पर आधारित हैं, यदि आप अभी भी कुछ आरसी-स्तर पर हैं, तो पहले अंतिम में अपग्रेड करने पर विचार करें। उदाहरण के लिए आरसी 4 और फाइनल के बीच बहुत कुछ बदल गया। –

+0

आपके उत्तर के लिए धन्यवाद, लेकिन मैं वास्तव में "वास्तविक" यूआरएल का उपयोग करना चाहता हूं। असल में मुझे एक समाधान मिला जो डिफ़ॉल्ट रणनीति के साथ काम करता है और इसे यहां पोस्ट करेगा। – jdachtera

1

मैं सलाह दूंगा कि baseURL कॉन्फ़िगरेशन विशेषता का उपयोग न करें। यह थोड़ा पुराना है और आपकी जैसी कुछ समस्याओं का कारण बनता है।

आप सेट कर सकते

config.absRefPrefix =/

सभी लिंक/अब साथ prepended किया जाएगा और भी काम करेंगे।

+0

TYPO3 7.6 के बाद से 'config.absRefPrefix = auto' का उपयोग करना संभव है जो स्वचालित रूप से अनुवांशिक पथ को कॉन्फ़िगर कर रहा है। हालांकि, यह अकेले Angular2 रूटिंग के साथ समस्या का समाधान नहीं करता है। –

+0

धन्यवाद, लेकिन मुझे नहीं लगता कि मेरी समस्या का समाधान होगा। यह भी TYPO3 स्थापना काफी पुरानी है और मैं इस सेटअप को नहीं बदल सकता। – jdachtera

0

देखो, मूल रूप से 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/मेरी/एप्लिकेशन द्वारा, प्रतिस्थापित किया जाएगा, ताकि आप अलग से प्रत्येक मॉड्यूल के लिए यह कर सकते हैं ... यह सिर्फ कोणीय आवेदन के भीतर लागू ...

अधिक जानकारी के लिए

, कोणीय दस्तावेज़ पर इन पृष्ठों को देख:

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

1

कोणीय मैं चर के बारे में त्रुटि के नवीनतम संस्करण में, तो मैं एक डेटा- का उपयोग विशेषता बजाय

<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 {} 
संबंधित मुद्दे