यदि प्रश्न शीर्षक अस्पष्ट है, तो मेरे पास कुछ अनुभाग "लिंक" के साथ एक वेबपृष्ठ है, जहां कोई भी लिंक पर क्लिक कर सकता है और उसी टेम्पलेट पर किसी तत्व पर लाया जा सकता है। यह यूआरएल बदलने का मतलब नहीं है।कोणीय 2 - वर्तमान पृष्ठ पर अंक के लिए एंकर लिंक
मैं क्या कोशिश की है का सार:
<a href="#sectionA>Section A</a>
<a href="#sectionB>Section B</a>
<a href="#sectionC>Section C</a>
<br/>
<div id="sectionA">
<p> Content for A </p>
</div>
<div id="sectionB">
<p> Content for B </p>
</div>
<div id="sectionC">
<p> Content for C </p>
</div>
क्योंकि लिंक पर क्लिक, baseurl/# जो अनुभाग (अस्तित्वहीन मार्ग) के लिए मुझे नेविगेट होगा बल्कि घटक के मार्ग से यह दृष्टिकोण काम नहीं किया पृष्ठ का हिस्सा था (baseUrl/currentPage # sectionA)।
पहले दृष्टिकोण न करना, इसकी मैं नीचे की कोशिश की:
<a href="currentPage#sectionA>Section A</a>
<a href="currentPage#sectionB>Section B</a>
<a href="currentPage#sectionC>Section C</a>
यह वास्तव में, वर्तमान पृष्ठ के लिए काम करता है currentPage पर अनुभाग के लिए उपयोगकर्ता स्क्रॉल; समस्या तब सामने आई जब हमारे पास एक ही घटक और टेम्पलेट का उपयोग करके एक बाल मार्ग है। अनिवार्य रूप से, 'baseUrl/currentPage' पर नेविगेट करने से आप एक खाली रूप में ले जाते हैं। उपयोगकर्ता के लिए नेविगेट करने के लिए उपयोगकर्ता थे, उदाहरण के लिए, 'baseUrl/currentPage/1', हम उम्मीद करेंगे कि फॉर्म 1 के डेटा के साथ भर जाएगा, जो एक आईडी है।
मैं क्या चाहता हूं कि उपयोगकर्ता इस पक्ष संदर्भ मेनू में एक एंकर पर क्लिक करने के लिए वर्तमान पेज और वर्तमान पेज के वर्तमान पैरामीटर (वर्तमान पृष्ठ/1, वर्तमान पृष्ठ/31, आदि) द्वारा उपयोग किए गए टेम्पलेट पर नेविगेट करने के लिए है।)। महत्वपूर्ण नहीं है कि टेम्पलेट पर अनुभाग यूआरएल में संदर्भित किया जाए। मुझे केवल यह ख्याल है कि नेविगेशन पहलू माता-पिता और उसके बच्चों के लिए कार्यात्मक हो। यह निश्चित रूप से तीसरे पक्ष के कोणीय प्लगइन का उपयोग नहीं करना बेहतर है।
सभी सुझाव और इनपुट की बहुत सराहना की जाती है।
संपादित करें: संदर्भ के लिए जोड़ना घटक मार्गों:
export const CurrentComponentRoutes: Route[] = [
{
path: 'currentPage',
component: CurrentComponent
},
{
path: 'currentPage/:ID',
component: CurrentComponent
}
];
ऊपर मार्गों मुख्य app.component मार्ग को निर्यात किया जाता:
export const appRoutes: Routes = [
...CurrentComponentRoutes,
...OtherRoutes
];
export const routing: ModuleWithProviders = RouterModule.forRoot(approot);
निर्यात मार्ग फिर मुख्य ऐप्लिकेशन में आयात किया जाता है। मॉड्यूल। इसके अतिरिक्त, मैंने index.html फ़ाइल में base href सेट किया है।
केवल एक चीज मैंने देखा है कि काम हो सकता है है [इस नेविगेशन विकल्प] (https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html#!#fragment-anchor)। – pe8ter