Question

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

Answer 1

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

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

2）然后定义您的应用程序路由并将其导出到var，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＆amp; 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>
  `,
})

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

2 个答案: