指向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">