無法使用嵌套路由導航 - angular2.rc3

Question

我無法通過配置嵌套路由與新路由器導航。我得到的錯誤爲「錯誤：未捕獲（承諾）：錯誤：無法匹配任何路線：'todos'」。我不知道我出了什麼問題。任何人都可以幫我解決這個問題嗎？提前致謝。

Answer 1

你需要把這樣的事情：

//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> 
    `, 
}) 

Answer 2

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），你應該包括路由器& 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

我希望它能幫助