2016-07-12 5 views
2

Скажем, я получил этот маршрут конфигурации:Что означает действительный [routerLink] для относительного маршрута aux?

{ path: 'contact', component: ContactComponent, children: [ 
    { path: ':id', component: ContactDetailComponent }, 
    { path: 'chat', component: ContactChatComponent, outlet: 'chat' } 
]} 

Если я перейти к

/contact/7 

Я достигаю о контакте, но как добраться до маршрута Окс оттуда? То есть, что мне нужно положить в мой [routerLink]?

Я знаю, что может легко попасть с абсолютной URL такой как

/contact/(7//chat:chat) 

, но что, если мне нужно использовать относительную ссылку здесь? Какую форму он должен принять? Я пробовал

[routerLink]="['chat:chat']" 
[routerLink]="['//chat:chat']" 
[routerLink]="['(7//chat:chat)']" 

и т. Д., Но ни одна из них не создает ссылку, которая фактически работает (см. Выше).

Я нахожусь на RC4 с маршрутизатором 3.0.0-beta2.

+0

Я знаю, что это будет дополнительная работа для вас, но [плункер] (https://angular.io/resources/live-examples/toh-1/ts/plnkr.html) или [jsfiddle] (https://jsfiddle.net/), может быть хорошо воспроизвести это, чтобы мы могли играть с ним также –

+0

Я посмотрю, что я могу сделать. –

+0

Кажется, plnkr не может справиться с этими типами URL, 'GET http://run.plnkr.co/contact/(7//aux:chat) 400 (Bad Request)' - для чего это стоит, plnkr здесь: http://plnkr.co/edit/OwS5RR6dBeKzh31HeE3G –

ответ

0

Итак, кажется, что ошибка или два в [routerLink], поэтому мне пришлось придумать обходной путь. Как я уже намекал в комментарии к моему первоначальному вопросу, я использую эти вспомогательные маршруты, чтобы перейти к модальному диалогу, например.

/contacts 

отобразит список контактов и

/(contacts//aux:new) 

предполагается открыть модальное диалоговое окно сверху списка контактов вместо рендеринга в том же контейнере и скрытие списка.

я достиг того же эффекта за счет введения фиктивной компонент

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'aux-route-workaround', 
    template: '' 
}) 
export class AuxRouteWorkaroundComponent { } 

Конфигурация маршрутизации принимает вид

export const ContactsComponentRoutes = [ 
    { 
     path: 'contacts', 
     component: ContactsComponent, 
     children: [ 
      { path: '', component: AuxRouteWorkaroundComponent }, 
      { path: 'new', component: NewContactComponent } 
     ] 
    } 
]; 

и шаблон для ContactsComponent становится

template: ` 
    <contacts-list></contacts-list> 
    <router-outlet></router-outlet> 
` 

Так что если теперь я перехожу на

/contacts 

в '' активизирован, то есть ContactListComponent визуализируется, как компонент обходного пути (шаблон, который пуст, поэтому он ничего не добавляет к виду).

Используя

[routerLink]="['new']" 

можно затем перемещаться (относительно) к

/contacts/new 

и на этот раз диалог компонент оказанной для <router-outlet>, показывающий оба компонента, ContactsListComponent и NewContactComponent внутри того же родителя компонент - поскольку они будут использовать вспомогательные маршруты.

Миссия выполнена.

 Смежные вопросы

  • Нет связанных вопросов^_^