मूलभूतता: राउटर-आउटलेट

Question

के बीच नेविगेट बेहतर परिचय के लिए blog post about outlets देखें।

मैं नेटस्क्रिप्ट (संरक्षित कॉम्पोनेंट) के साथ लिखे गए अपने मोबाइल ऐप के माध्यम से नेविगेट करने के लिए एक टैब व्यू का उपयोग करता हूं।

<TabView 
    #tabView 
    tabsBackgroundColor="#f57c00" selectedTabTextColor="#B23010" 
    [(ngModel)]="selectedIndex" 
    (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)"> 

    <StackLayout *tabItem="{iconSource: 'res://tab-icons/cats'}"> 
    <cats-tab></cats-tab> 
    </StackLayout> 

    <StackLayout *tabItem="{iconSource: 'res://tab-icons/dogs'}"> 
    <dogs-tab></dogs-tab> 
    </StackLayout> 
</TabView> 

यह नेविगेशन के लिए प्रासंगिक घटक कोड का हिस्सा है:

<router-outlet name="catOutlet"></router-outlet> 

मार्ग में सेटअप है:

navigateToCatsRoot() { 
    this.router.navigate([ 
    '/protected', 
    { outlets: { catOutlet: ['cats'] } } 
    ]); 
} 

navigateToDogsRoot() { 
    this.router.navigate([ 
    '/protected', 
    { outlets: { dogOutlet: ['dogs'] } } 
    ]); 
} 

tabViewIndexChange(index: number) { 
    switch(index) { 
    case 0: 
     this.navigateToCatsRoot(); 
     break; 
    case 1: 
     this.navigateToDogsRoot(); 
     break; 
    } 
} 

हर टैब सिर्फ रूटर आउटलेट विन्यास, उदाहरण के लिए होता है निम्न तरीका:

{ path: "", redirectTo: "/login", pathMatch: "full" }, 
{ path: "login", component: LoginComponent }, 
{ path: 'protected', component: ProtectedComponent, children: [ 
    { path: 'cats', component: CatsComponent, outlet: 'catOutlet'}, 
    { path: 'cat/:id', component: CatDetailComponent, outlet: 'catOutlet'}, 
    { path: 'dogs', component: DogsComponent, outlet: 'dogOutlet'}, 
    { path: 'dog/:id', component: DogDetailComponent, outlet: 'dogOutlet'}, 
    ]}, 

टैब नेविगेशन एक आकर्षण की तरह काम करता है। मैं अलग दुकानों के लिए टैब नेविगेशन के माध्यम से नेविगेट कर सकते हैं और मैं भी कि आउटलेट के विवरण पृष्ठ पर एक आउटलेट से नेविगेट कर सकते हैं: जैसे ही मैं कोशिश कर रहा हूँ

this.router.navigate(
    ['/protected', { outlets: { catOutlet: ['cat', cat.id] } }] 
); 

समस्या मैं में चल रहा हूँ है अन्य आउटलेट के अन्य विवरण दृश्य में एक आउटलेट में एक विस्तार दृश्य से कूदें। इसलिए यदि मैं बिल्ली विवरण से निम्न को कॉल कर रहा हूं:

this.router.navigate(
    ['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }] 
); 

मुझे कोई त्रुटि नहीं मिलती है लेकिन कुछ भी नहीं होने लगता है। जैसे ही मैं टैब नेविगेशन (जो अभी भी काम करता है) का उपयोग करके आउटलेट में स्विच कर रहा हूं, मैं कुत्तों के अवलोकन (जो टैब नेविगेशन को करना चाहिए) से रीसेट करने से पहले बहुत ही कम समय के लिए विस्तार कुत्ते के दृश्य को देखता है।

इसका मतलब है कि dogOutlet वास्तव में सही नेविगेशन और घटक के साथ अद्यतन किया गया है लेकिन दृश्य/आउटलेट पर स्विच नहीं करता है। घटक लोड किया गया है, मैंने सत्यापित किया है कि कुत्ते के विवरण के ऑनइनिट में लॉगिंग के साथ। यह सिर्फ उस आउटलेट पर स्विच नहीं करता है और आउटलेट दिखाता है।

यह आउटलेट अपडेट करने के लिए कैसे संभव है, लेकिन टैब पर देखने के साथ ओवरव्यू घटकों के लिए काम करता है क्योंकि यह भी स्विच हो सकता है?

Answer 1

मैंने प्रश्न github repository as an issue पर पोस्ट किया और एक उत्तर प्राप्त किया।

समस्या यह थी कि नेविगेशन वास्तव में बदल गया था, लेकिन TabView के selectedIndex को बदला नहीं गया था। नेविगेशन परिवर्तन के लिए यह अतिरिक्त रूप से करते समय, सबकुछ काम करता है!

let tabView:TabView = <TabView>this.page.getViewById("tabView"); 
tabView.selectedIndex = 2;