2016-03-31 13 views
0

Bulunduğunuz rotaya bağlı olarak, kenar çubuğunda farklı içerik göstermek için yardımcı rotalar kullanmaya çalışıyorum. Sorun, yardımcı yolun, navigasyondan sonra (hem URL'de hem de içeriğinde) kalmasıdır.Angular 2'deki yardımcı rotalar, navigasyondan sonra URL'de kalıyor

HTML:

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

RouteConfig:

@RouteConfig([ 
    {path: '/', name: 'Home', component: Home, useAsDefault: true}, 
    {path: '/leadslist', name: 'LeadsList', component: LeadsList}, 
    {aux:'/sidebar', name: 'Sidebar', component: Sidebar} 
]) 

gezinme çubuğu bağlantıları:

<a [routerLink]="['Home']">Home</a>  
<a [routerLink]="['LeadsList', ['Sidebar']]">Leads list</a> 

Güncel Davranış: Ana sayfadan

  1. , ben "listesi Leads" bağlantısını tıklayın.
  2. "/ Leadlist (sidebar)" yoluna yönlendirildim ve kenar çubuğu içeriği yönlendirici çıkışına doğru şekilde yüklendi. Şimdiye kadar iyi.
  3. Şimdi "Ana Sayfa" bağlantısına geri dönüp "/" adresine geri dönersem, URL bunun yerine "/ (kenar çubuğu)" olur, bu da beni ana sayfaya götürür ancak kenar çubuğu yüklüdür (istenmeyen davranış!)

sorum: Ben yardımcı rota "etiketleme" olmadan rota gidebilirsiniz nasıl? Bu Angular2 yönlendirici daha iyi ele alınabileceği

+0

http://stackoverflow.com/questions/36220266/click-to-remove-deactivate-auxiliary-route-in-angular-2 (ayrıca yanıt yok) gibi görünüyor Ayrıca bkz. Https://github.com/angular/açısal/sorunlar/5122 –

cevap

2

Şu anda (imho), ama ne null için aux çıkış ayarlanır yapmak ve geri gitmek istiyorum url ile primary çıkış işaret etmek gerekir.

Bu, primary angular2 için ayrılmış bir varsayılan çıkış olduğundan, bu çalışır. Biz bir e-posta görüntüleme ve Yanıt yazmak edildi /inbox/123131$asd(compose:reply)

Yukarıdaki rotada:

aşağıdaki rotayı düşünün. Yani - bunu gönderdiğimizde, kullanıcının ana görünüme geri gönderilmesini isteyebiliriz - gelen kutusu. Sonra routerLink aşağıdaki gibi görünecektir gerekir:

<a [routerLink]="['',{outlets: {compose: null, primary: '/inbox'}}]" >Close</a>

bu Angular2 yönlendirici üçüncü yeniden yazma sırasında değişikliğe tabi olabileceğini dikkatli olun.