Указание на детский маршрут в Angular 2

Question

Это большой вопрос, но на самом деле это довольно просто (я думаю), я хочу указать на детское представление из своего меню. В моем верхнем компоненте приложения (core) я определил родительский маршрут с именем Videos, который имеет 3 дочерних маршрута (create, edit, list), которые он может отобразить.

Что я не понимаю, так это то, как указать на детские маршруты из моего меню? Теперь я просто указываю на родительский маршрут, но он не знает, какой дочерний маршрут будет отображаться, потому что я не говорю, как это сделать.

Как вы это делаете?

core.component.ts (основной компонент приложения):

import {Component} from 'angular2/core'; 
import {RouteConfig} from 'angular2/router'; 
import {NavComponent} from '../nav/nav.component'; 
import {TagsComponent} from '../tags/tags.component'; 
import {VideosComponent} from '../videos/videos.component'; 

@Component({ 
    selector: 'core-app', 
    templateUrl: './app/assets/scripts/modules/core/core.component.html', 
    styleUrls: ['./app/assets/scripts/modules/core/core.component.css'], 
    directives: [NavComponent] 
}) 

@RouteConfig([ 
    {path: '/videos/...', name: 'Videos', component: VideosComponent} 
]) 

export class CoreComponent { 

} 

videos.component.ts (родительский маршрут):

import {Component} from 'angular2/core'; 
import {RouteConfig} from 'angular2/router'; 
import {CreateVideosComponent} from '../videos/create/create.videos.component'; 
import {EditVideosComponent} from '../videos/edit/edit.videos.component'; 
import {ListVideosComponent} from '../videos/list/list.videos.component'; 

@Component({ 
    selector: 'videos', 
    templateUrl: './app/assets/scripts/modules/videos/videos.component.html', 
    styleUrls: ['./app/assets/scripts/modules/videos/videos.component.css'] 
}) 

@RouteConfig([ 
    {path: '/create', name: 'Create', component: CreateVideosComponent}, 
    {path: '/edit', name: 'Edit', component: EditVideosComponent}, 
    {path: '/list', name: 'List', component: ListVideosComponent} 
]) 

export class VideosComponent {} 

list.videos.component .ts (один из детских маршрутов):

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'list-videos', 
    templateUrl: './app/assets/scripts/modules/videos/list/list.videos.component.html', 
    styleUrls: ['./app/assets/scripts/modules/videos/list/list.videos.component.css'] 
}) 

export class ListVideosComponent {} 

nav.component.ts (мое меню):

import {Component} from 'angular2/core'; 
import {ROUTER_DIRECTIVES} from 'angular2/router'; 
import {NavService} from '../nav/nav-api.service'; 
import {NAVLIST} from '../nav/nav-list'; 

@Component({ 
    selector: 'nav-list', 
    templateUrl: './app/assets/scripts/modules/nav/nav.component.html', 
    styleUrls: ['./app/assets/scripts/modules/nav/nav.component.css'], 
    providers: [NavService], 
    directives: [ROUTER_DIRECTIVES], 
    host: { 
    '(mouseenter)': 'show()', 
    '(mouseleave)': 'hide()' 
    } 
}) 

export class NavComponent { 
    public isToggled = false; 
    public links = NAVLIST; 

    constructor(private _navService: NavService) {} 

    show() { 
    this.isToggled = this._navService.show(); 
    } 

    hide() { 
    this.isToggled = this._navService.hide(); 
    } 
} 

nav.item.ts (интерфейс для пункта меню):

export interface NavItem { 
    href: string, 
    label: string, 
    icon: string 
} 

nav.list. ts (информация по меню):

import {NavItem} from '../nav/nav-item'; 

export var NAVLIST: NavItem[] = [ 
    { 'href': 'Videos', 'label': 'Videos', 'icon': 'icon icon-contact' } 
] 

nav.component.html (как я беру NAVLIST и создает меню из него):

<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isToggled"> 
    <ul class="nav-links"> 
    <li class="nav-link" *ngFor="#link of links"> 
     <a [routerLink]="[link.href]"> 
     <div class="label-wrapper">{{link.label}}</div> 
     <div class="icon-wrapper"><i class="{{link.icon}}"></i></div> 
     </a> 
    </li> 
    </ul> 
</nav> 

Answer 1

Использование что-то вроде этого:

<a [routerLink]="['ParentRouteName','ChildRoute','GrandchildRoute']">Somewhere</a>

Таким образом, в вашем примере вы можете сделать что-то вроде:

{ 'href': ['Videos','List'], 'label': 'Videos', 'icon': 'icon icon-contact' }

и

<a [routerLink]="link.href">