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

指向 Angular 2 中的子路由

Pointing to a child route in Angular 2

angular2-routing

angular