एंग यूआरएल

Question

के बिना कोणीय 2 घोंसला वाले दृश्य कोणीय 2 रूटिंग की कोशिश कर रहे हैं।

मेरे आवेदन में 4 पृष्ठ और 4 मार्ग हैं (आर 1, आर 2, आर 3, आर 4)। मैं इन पृष्ठों के दो समूहों को अलग करना चाहता हूं। आर 1 और आर 2 के लिए "सामग्री 1" फ़ील्ड वही होगा। आर 3 और आर 4 के लिए, "सामग्री 1" फ़ील्ड वही होगा और प्रत्येक सामग्री के लिए "सामग्री 2" फ़ील्ड बदलेगी।

मैं टेम्पलेट में घटक को कॉल करके ऐसा कर सकता हूं, लेकिन "सामग्री 1" फ़ील्ड को फिर से संकलित किया जा रहा है।

मैं AUX रूटिंग का उपयोग नहीं करना चाहता हूं। यूआरएल बदसूरत लग रहा है।

मैं कोणीय में पहले यह कर सकता था 1. मैं कोणीय 2 में यह कैसे कर सकता हूं?

<header></header> 
<content-1></content-1> 
<router-outlet></router-outlet> 
<footer></footer> 

अब रूटर है कि यह सही content 2 आंकड़ों से पता चलता कॉन्फ़िगर करें:

Answer 1

आप प्रत्येक सामग्री एक अलग घटक ब्लॉक बनाकर और निम्न अपने ऐप मार्ग जगह में कुछ इस तरह बना सकते हैं विशिष्ट मार्ग के लिए। घटक संवाद करने में भी सक्षम हैं ताकि आप प्रासंगिक डेटा को content-1 घटक में पास कर सकें (कोणीय दस्तावेज़ों में Component interaction देखें)।

Answer 2

ऐसा लगता है कि कोणीय 2 डिफ़ॉल्ट राउटर वास्तव में एकाधिक नामित दृश्यों का समर्थन करता है। यह अजीब AUX रूटिंग (नाम आउटलेट) सुविधा कुछ दुर्लभ मामलों (पॉपअप, गतिशील क्षेत्रों इत्यादि) में उपयोगी हो सकती है लेकिन यह एकाधिक प्लेसहोल्डर्स के साथ क्लासिक मास्टर-बाल टेम्पलेट्स के लिए बिल्कुल उपयोग करने योग्य नहीं है।

एक कट्टरपंथी समाधान डिफ़ॉल्ट के बजाय ui-router for angular-2 पर स्विच हो सकता है।

Answer 3

आप निम्नानुसार राउटर-आउटलेट नामकरण करके इसे प्राप्त कर सकते हैं।

आप यह मानते हुए पहले appComponent लोड कर रहे हैं,

app.component.html

<header></header> 
<router-outlet name='content1_r1_r2'><router-outlet/> 
<router-outlet name='content1_r3_r4'><router-outlet/> 
<router-outlet name='content2'><router-outlet/> 
<footer></footer> 

इस प्रकार अपने रूटर कॉन्फ़िगर करें:

{ 
    path: 'r1', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr12Component, outlet: 'content1_r1_r2' }, 
     { path: '', component: contentr1Component, outlet: 'content2' } 
    ] 
} 
// write same for r2 just change content1Component you want to load on /r2 route. 

{ 
    path: 'r3', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr34Component, outlet: 'content1_r2_r4' }, 
     { path: '', component: contentr3Component, outlet: 'content2' } 
    ] 
} 

// write same for r4 just change content3Component you want to load on /r4 route. 

ऊपर कोड contentr12Component में ही रहेगा आर 1 और आर 2 रूट के लिए, contentr34 कॉम्पोनेंट आर 3 और आर 4 के लिए समान रहेगा। आप अपने घटक के अनुसार नामों को प्रतिस्थापित कर सकते हैं।

यह बदसूरत दिखने वाले यूआरएल से भी बच जाएगा।