Angular2 एक ही टेम्पलेट में कई राउटर-आउटलेट

Question 1

क्या एक ही टेम्पलेट में कई राउटर-आउटलेट होना संभव है?

यदि हाँ, तो मार्गों को कैसे कॉन्फ़िगर करें?

मैं कोणीय 2 बीटा का उपयोग कर रहा हूं।

Question 2

हाँ, आप कर सकते हैं, लेकिन आपको aux रूटिंग का उपयोग करने की आवश्यकता है। आपको अपने राउटर-आउटलेट को एक नाम देना होगा:

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

और अपना मार्ग विन्यास सेट करें:

@RouteConfig([
  {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true},
  {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])

इस उदाहरण को देखें: http://plnkr.co/edit/JsZbuR?p=preview इस वीडियो को भी देखें : https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be

RC.5 औक्स रूट के लिए अद्यतन थोड़ा बदल गया है: आपके राउटर आउटलेट में एक नाम का उपयोग करें:

<router-outlet name="aux">

आपके रूटर कॉन्फ़िगरेशन में:

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}

Question 3

आप अपने राउटर को कॉन्फ़िगर करके और अपने राउटर-आउटलेट को नाम प्रदान करके एक ही टेम्पलेट में कई राउटर-आउटलेट रख सकते हैं, आप इसे निम्नानुसार प्राप्त कर सकते हैं।

नीचे दृष्टिकोण का लाभ यह है कि आप इसके साथ गंदे दिखने वाले URL से बच सकते हैं। जैसे: / घर (aux: लॉगिन) आदि।

लोड पर मान लें कि आप appComponent बूटस्ट्रैप कर रहे हैं।

app.component.html

<div class="layout">
    <div class="page-header">
        //first outlet to load required component
        <router-outlet name='child1'></router-outlet>
    </div>
    <div class="content">
        //second outlet to load required component
        <router-outlet name='child2'></router-outlet>
    </div>
</div>

अपने राउटर में निम्नलिखित जोड़ें।

{
    path: 'home',  // you can keep it empty if you do not want /home
    component: 'appComponent',
    children: [
        {
            path: '',
            component: childOneComponent,
            outlet: 'child1'
        },
        {
            path: '',
            component: childTwoComponent,
            outlet: 'child2'
        }
    ]
}

अब जब / होम लोड किया गया है appComponent को आवंटित टेम्पलेट के साथ लोड मिलेगा, तो कोणीय राउटर मार्ग की जांच करेगा और नाम के आधार पर निर्दिष्ट राउटर आउटलेट में बच्चों के घटक को लोड करेगा।

ऊपर की तरह आप एक ही मार्ग में कई राउटर-आउटलेट के लिए अपने राउटर को कॉन्फ़िगर कर सकते हैं।

Question 4

नए RC.3 राउटर के साथ ऑक्स रूट्स सिंटैक्स बदल गया है।

ऑक्स मार्गों के साथ कुछ ज्ञात मुद्दे हैं लेकिन बुनियादी समर्थन उपलब्ध है।

आप नाम में घटकों को दिखाने के लिए मार्गों को परिभाषित कर सकते हैं <router-outlet>

मार्ग का विन्यास

{path: 'chat', component: ChatCmp, outlet: 'aux'}

जिसका नाम राउटर आउटलेट रखा गया है

<router-outlet name="aux">

औक्स मार्गों को नेविगेट करें

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

ऐसा लगता है कि राउटरलिंक से ऑक्स मार्गों को नेविगेट करना अभी तक समर्थित नहीं है

<a [routerLink]="'/team/3(aux:/chat;open=true)'">Test</a>

<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>

अभी तक खुद को आजमाया नहीं

~~एक घटक में Angular2 राउटर~~ भी देखें

RC.5 राउटरलिंक DSL ( createUrlTreeपैरामीटर के समान ) https://angular.io/docs/ts/latest/api/router/index/Router-class.html# !#createUrlTree-anchor

Question 5

<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>

<div id="list">
    <router-outlet name="list"></router-outlet>
</div>
<div id="details">
    <router-outlet name="details"></router-outlet>
</div>

`

 {
    path: 'admin',
    component: AdminLayoutComponent,
    children:[
      {
        path: '',
        component: AdminStreamsComponent, 
        outlet:'list'
      },
      {
        path: 'stream/:id',
        component: AdminStreamComponent,
        outlet:'details'
      }
    ]
  }

Question 6

हाँ जैसा कि आप ऊपर @tomer द्वारा कहा जा सकता है। मैं @tomer जवाब में कुछ बिंदु जोड़ना चाहता हूं।

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

अधिक जानकारी के लिए यहां और यहां पढ़ें ।

import {RouteConfig, AuxRoute} from 'angular2/router';
@RouteConfig([
  new AuxRoute({path: '/home', component: HomeCmp})
])
class MyApp {}

Question 7

एक टेम्पलेट में राउटर-आउटलेट का पुन: उपयोग करने के लिए एक और (बल्कि हैक करने वाला) तरीका लगता है। यह उत्तर केवल सूचना के उद्देश्यों के लिए है और यहां इस्तेमाल की जाने वाली तकनीकों का उत्पादन में उपयोग नहीं किया जाना चाहिए।

https://stackblitz.com/edit/router-outlet-twice-with-events

राउटर-आउटलेट एक एनजी-टेम्पलेट द्वारा लपेटा गया है। राउटर की घटनाओं को सुनकर टेम्प्लेट को अपडेट किया जाता है। प्रत्येक घटना पर टेम्पलेट को स्वैप किया जाता है और एक खाली प्लेसहोल्डर के साथ फिर से स्वैप किया जाता है। इस "स्वैपिंग" के बिना टेम्प्लेट को अपडेट नहीं किया जाएगा।

यह सबसे निश्चित रूप से एक अनुशंसित दृष्टिकोण नहीं है, हालांकि, दो टेम्पलेट्स की पूरी अदला-बदली थोड़ी हैकरी लगती है।

नियंत्रक में:

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => {
      console.log(routerEvent);
      this.myTemplateRef = this.trigger;
      setTimeout(() => {
        this.myTemplateRef = this.template;
      }, 0);
    });
  }

टेम्पलेट में:

<div class="would-be-visible-on-mobile-only">
  This would be the mobile-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<hr>

<div class="would-be-visible-on-desktop-only">
  This would be the desktop-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<ng-template #template>
    <br>
    This is my counter: {{counter}}
    inside the template, the router-outlet should follow
    <router-outlet>
    </router-outlet>
</ng-template>

<ng-template #trigger>
  template to trigger changes...
</ng-template>

Question 8

आप एक ही टेम्पलेट में कई राउटर आउटलेट का उपयोग ngIfशर्त के साथ नहीं कर सकते । लेकिन आप इसे नीचे दिखाए गए तरीके से उपयोग कर सकते हैं:

<div *ngIf="loading">
  <span>loading true</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!loading">
  <span>loading false</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
  </div>

  <ng-template #template>
    <router-outlet> </router-outlet>
  </ng-template>