Angular2: अलग "टूलबार" घटकों मुख्य नेविगेशन

Question

के आधार पर प्रदर्शित यह कैसे आवश्यक कार्यक्षमता कोणीय 2.

मेरे आवेदन के साथ "सही" जिस तरह से लागू करने के लिए पर एक conceptional सवाल यह है कि है एक नेविगेशन मेनू, उपकरण पट्टी, और एक सामग्री क्षेत्र। उत्तरार्द्ध में प्राथमिक <router-outlet> होता है और सूची और विवरण जैसे विभिन्न दृश्य प्रदर्शित करता है।

जो मैं प्राप्त करना चाहता हूं वह यह है कि टूलबार सामग्री क्षेत्र में प्रस्तुत घटक/दृश्य के आधार पर विभिन्न घटकों को प्रदर्शित कर रहा है। उदाहरण के लिए, सूची घटक को टूलबार में एक खोज नियंत्रण की आवश्यकता होती है, जबकि विवरण घटक को एक सेव बटन की आवश्यकता होती है।

ए) मेरा पहला प्रयास टूलबार में एक और (नामित) <router-outlet> जोड़ने और स्थिर मार्गों के आधार पर टूलबार घटकों को प्रदर्शित करना था। इसके बारे में क्या गलत लगता है:

1. स्थिर सामग्री-टूलबार संबंध मेरे स्वाद के लिए बहुत कम है।
2. संबंध URL में दृश्यमान (और परिवर्तनीय) है।
3. टूलबार आउटलेट इस पथ को तब भी रखता है जब उपयोगकर्ता नेविगेट करता है।

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

1. ए 2
2. ए 3, ngOnDestroy पर इस मैं कर सकता "स्पष्ट" उपकरण पट्टी के आउटलेट को रोकने के लिए है, लेकिन मैं बाहर कैसे नहीं मिली है।

सी) रूटर एक आखिरी मौका देते हुए के बाद मुझे पता चला कि इस तरह का काम करता है-:

const ROUTES: Routes = [ 
    {path: "buildings", children: [ 
     {path: "", component: BuildingListComponent, pathMatch: "full", outlet: "primary"}, 
     {path: "", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"}, 
     {path: ":id", component: BuildingDashboardComponent, outlet: "primary"} 
    ]} 
]; 

विचार यह है कि रूटर आउटलेट प्रति मिलान पथ चुनेंगे । लेकिन (nooo, यह इतना आसान नहीं था सकता है) दुर्भाग्य से, यह काम नहीं करता:

const ROUTES: Routes = [ 
    {path: "buildings", children: [ 
     {path: "list", component: BuildingListComponent, pathMatch: "full", outlet: "primary"}, 
     {path: "list", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"}, 
     {path: ":id", component: BuildingDashboardComponent, outlet: "primary"} 
    ]} 
]; 

यह appearently (और शायद accidentially) केवल एक खाली पथ के साथ काम करता है। क्यों ओह क्यों?

डी) एक पूरा अलग रणनीति मेरी घटक पदानुक्रम rework करने के लिए, ताकि हर मुख्य दृश्य घटक एक उपयुक्त उपकरण पट्टी शामिल है, और multi-slot content projection का उपयोग किया जाएगा। यह कोशिश नहीं की है, लेकिन मुझे टूलबार के कई उदाहरणों के साथ समस्याओं में भागने से डर है।

कभी-कभी, यह एक आम उपयोग केस प्रतीत होता है, और मैं सोच रहा हूं कि कैसे कोणीय 2 विशेषज्ञ इसे हल करेंगे। कोई विचार?

Answer 1

जैसा कि ग्ंटर ज़ोचबॉयर द्वारा सुझाया गया है (धन्यवाद!), मैंने टूलबार में गतिशील घटकों को जोड़ने और हटाने को समाप्त कर दिया। वांछित टूलबार घटक मार्ग के डेटा विशेषता में निर्दिष्ट है और केंद्रीय घटक (navbar) द्वारा मूल्यांकन किया गया है जिसमें टूलबार शामिल है।
ध्यान दें कि navbar घटक को टूलबार घटकों (जो feauture मॉड्यूल में परिभाषित हैं) के बारे में कुछ भी जानने की आवश्यकता नहीं है।
उम्मीद है कि यह किसी की मदद करेगा।

इमारतों-routing.module.ts

const ROUTES: Routes = [ 
    {path: "buildings", children: [ 
     { 
      path: "", 
      component: BuildingListComponent, 
      pathMatch: "full", 
      data: {toolbar: BuildingListToolbarComponent} 
     }, 
     { 
      path: ":id", 
      component: BuildingDashboardComponent, 
      data: {toolbar: BuildingDashboardToolbarComponent} 
     } 
    ]} 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forChild(ROUTES) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class BuildingsRoutingModule { 
} 

navbar.component.html

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <form class="navbar-form navbar-right"> 
      <div #toolbarTarget></div> 
     </form> 
    </div> 
</div> 

navbar.component.ts

@Component({ 
    selector: 'navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.scss'] 
}) 
export class NavbarComponent implements OnInit, OnDestroy { 

    @ViewChild("toolbarTarget", {read: ViewContainerRef}) 
    toolbarTarget: ViewContainerRef; 

    toolbarComponents: ComponentRef<Component>[] = new Array<ComponentRef<Component>>(); 
    routerEventSubscription: ISubscription; 


    constructor(private router: Router, 
       private componentFactoryResolver: ComponentFactoryResolver) { 
    } 

    ngOnInit(): void { 
     this.routerEventSubscription = this.router.events.subscribe(
      (event: Event) => { 
       if (event instanceof NavigationEnd) { 
        this.updateToolbarContent(this.router.routerState.snapshot.root); 
       } 
      } 
     ); 
    } 

    ngOnDestroy(): void { 
     this.routerEventSubscription.unsubscribe(); 
    } 

    private updateToolbarContent(snapshot: ActivatedRouteSnapshot): void { 
     this.clearToolbar(); 
     let toolbar: any = (snapshot.data as {toolbar: Type<Component>}).toolbar; 
     if (toolbar instanceof Type) { 
      let factory: ComponentFactory<Component> = this.componentFactoryResolver.resolveComponentFactory(toolbar); 
      let componentRef: ComponentRef<Component> = this.toolbarTarget.createComponent(factory); 
      this.toolbarComponents.push(componentRef); 
     } 
     for (let childSnapshot of snapshot.children) { 
      this.updateToolbarContent(childSnapshot); 
     } 
    } 

    private clearToolbar() { 
     this.toolbarTarget.clear(); 
     for (let toolbarComponent of this.toolbarComponents) { 
      toolbarComponent.destroy(); 
     } 
    } 
} 

संदर्भ:
https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
https://engineering-game-dev.com/2016/08/19/angular-2-dynamically-injecting-components
Angular 2 dynamic tabs with user-click chosen components
Changing the page title using the Angular 2 new router