无法使用嵌套路由导航 - angular2.rc3

Question

我无法通过使用新路由器配置 嵌套路由 进行导航。我收到错误 “错误：未捕获（承诺）：错误：无法匹配任何路线：'todos'”。我不知道我哪里出错了。谁能帮我解决这个问题？提前致谢。

Answer 1

1) 在您的主启动应用程序中添加如下内容：

<...>
import { PLATFORM_DIRECTIVES } from '@angular/core';
<...>
bootstrap( <...>
    , [APP_ROUTER_PROVIDERS , <...> ]);
<...>

2) 然后定义您的应用程序路由并将它们导出到一个变量 APP_ROUTER_PROVIDERS 中，例如（首先您需要导入所有必要的组件 - 并看到您有几种方法来定义它们）：

import { provideRouter, RouterConfig } from '@angular/router';
<...>
export const routes: RouterConfig = [
   { path: 'comp1', component: Component1 },
   ...Component1Routes, //if you want to have this in a separate file
   {
       path: 'comp2',
       component: Component2,
       'children': [
           { path: '', component: comp2 },
           { path: 'new', component: comp2new },
           { path: 'edit/:id', component: comp2edit }
        ]
    }
];
<...>
export const APP_ROUTER_PROVIDERS = [
    provideRouter(
        routes
        //, { enableTracing: true }
    )
];
...  

3) 您还需要在顶层组件中添加路由器指令：

import { ROUTER_DIRECTIVES } from '@angular/router';

4) 在任何子组件中，您都应该包含 Router 和 ActivatedRoute ：

import { Router, ActivatedRoute } from '@angular/router';

5) 在视图中，您可以使用以下命令添加链接：

<a [routerLink]="['comp1']"> Comp 1</a>

您可以在此处找到一个运行示例：http://embed.plnkr.co/ER0tf8fpGHZiuVWB7Q07/ 或http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

希望对你有帮助

Answer 2

你需要这样写：

//our root app component
import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES, RouterConfig, Router} from '@angular/router';

import {LoginComponent} from './login';
import {TodosComponent} from './todos.ts';

export const AppRoutes: RouterConfig = [
  {
    path: "login", 
    component: LoginComponent,
    name:"Login"
  },
  {
    path: 'todos',
    component: TodosComponent,
    name:"Todos"
  }
  ,
  {
    path: "", 
    redirectTo: "/todos"
  },
]

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
    <a [routerLink]="['Login']">Login</a>
    <a [routerLink]="['Todos']">Todos</a>
    <router-outlet></router-outlet>
  `,
})