कोणीय 2 +: एपीआई से प्रतिक्रिया पर आधारित रूटिंग

Question

मैं निम्नलिखित है

const routes = [ 
    { 
    path: 'product/:id', 
    component: ProductDetailsComponent, 
    } 
    { 
    path: 'search', 
    component: SearchResultsComponent, 
    } 
] 

अब कहते हैं कि

product/1 कहो - एक फिल्म जो DigitalMediaComponent

product/2 द्वारा प्रदान की गई है - एक कहना है ProductDetailsComponent

product/3 - एक वॉशर/ड्रायर बंडल है, जिसेके रूप में प्रस्तुत किया गया है

product/4 - एक गद्दे संग्रह है, यह भी शामिल है, एक गद्दे, फ्रेम, कवर, चादरें, तकिए, और एक बार बातें, रंग, आकार, धागा गिनती और इस तरह के एक नंबर

product/5 खरीदने से पहले चयन कर सकते हैं - एक मोटर वाहन उत्पाद एक टायर कहता है, इसलिए यह TireComponent प्रस्तुत करता है - इसे एक फिटमेंट मॉड्यूल की आवश्यकता होती है, वर्ष/मेक/मॉडल/ट्रिम चयन के साथ, और कई अन्य अनुकूलन

और सूची चलती है।

अब स्पष्ट रूप से, कुछ घटक हैं जिनका उपयोग इनमें से कुछ के बीच किया जाता है, लेकिन कुल मिलाकर वे एक दूसरे से काफी अलग हैं। तो मैं जावास्क्रिप्ट फाइल (और सीएसएस) को आलसी लोड (या आलसी डाउनलोड) करना चाहता हूं जिसमें इन घटकों को शामिल किया गया है, मुझे टायर दिखाते समय MoviePreviewComponent की आवश्यकता नहीं है।

मैं कई उदाहरण पढ़ लिया है और वे मार्ग और घटक के बीच एक संबंध के लिए एक के एक बहुत ही सरल मामले के बारे में सभी बात करते हैं, जैसे

{ path: 'product/:id', loadChildren: 'product/ProductDetailsComponent' } 
or 
{ path: 'product/:id', loadChildren:() => System.import('./product/ProductDetailsComponent').then(mod => mod.default) } 

वहाँ एक रास्ता है जहाँ मैं कर सकते हैं

1. कॉल है एक मार्ग
2. और आलसी डाउनलोड करने के लिए है कि API उपयोग System.import('...') के जवाब के आधार पर मॉड्यूल के लिए नेविगेट करने पर एक API

मैं एक इंटरस्टिशियल घटक पर नेविगेट नहीं करना चाहता हूं और वहां से लोड करना चाहता हूं क्योंकि जब उपयोगकर्ता खोज परिणामों से किसी उत्पाद पर क्लिक करता है (या साइट पर किसी भी अन्य प्रचारक बैनर से, जो कोणीय 2 के साथ बनाया जा सकता है या नहीं), और यदि पृष्ठ को लोड करने में थोड़ा सा समय लगता है, तो वे esc दबा सकते हैं और कुछ और क्लिक कर सकते हैं। यह सामान्य ब्राउज़र व्यवहार है और मैं

खोना नहीं चाहता हूं, भले ही मैं एक अंतरालीय घटक के साथ समाप्त हो, मैं गतिशील मॉड्यूल को लोड करने के बारे में कैसे जाऊं? आप एक गतिशील घटक लोडर इस लिंक [https://angular.io/guide/dynamic-component-loader] निम्नलिखित बना सकते हैं:

ngOnInit() { 
    let id = this.route.snapshot.params['id']; 
    fetch('/my/api/' + id) 
    .then(response => response.json()) 
    .then(data => { 
     System.import('./page/' + data.componentType) 
     .then(
      // then what do I do to register this module with Angular 
      // and replace this in the <router-outlet> 
    }) 

} 

Answer 1

अगर यह मदद करता है देखें। आपको सिर्फ आईडी और घटकों का मैपिंग बनाना होगा। लेख में दिए गए इस प्लंकर को देखें [https://embed.plnkr.co/?show=preview]।

Answer 2

मुझे लगता है कि अच्छे डिजाइन कोशिश इस तरह बनाने के लिए के लिए:

 ngOnInit(): void { 
       this.ServiceOfArray.getArray(id) 
      .then(u => this.showData(u)); 
    } 
    enter code here 

showData(data: Data) { 
     this.data= data; 
    } 


Service.class 
apiEndpoint: "http://localhost:52246/api"; 

     getArray(Id: number): Promise<SomeData> { 
      var url = this.config.apiEndpoint + "/somedata/" + Id; 
      return this.http.get(url) 
       .map(response => response.json() as SomeData) 
       .toPromise(); 
     }