无法匹配 Angular 2.1 中的任何路由

Question

我在 Visual Studio 2015 AspNetCore 项目中使用 Angular 2.1.0，并且在我的延迟加载模块中遇到路由问题。错误如下：

core.umd.js:3257 异常：未捕获（承诺中）：错误：无法匹配 任何路线。 URL 段：'Home/MyList' 错误：无法匹配任何 路线。 URL 段：'Home/MyList' 在 ApplyRedirects.noMatchError (http://localhost:31534/libraries/@angular/router/bundles/router.umd.js:769:20) 在 CatchSubscriber.eval [作为选择器] (http://localhost:31534/libraries/@angular/router/bundles/router.umd.js:747:33) 在 CatchSubscriber.error (http://localhost:31534/libraries/rxjs/operator/catch.js:52:31) 在 MapSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26) 在 MapSubscriber.Subscriber.error (http://localhost:31534/libraries/rxjs/Subscriber.js:102:18) 在 MapSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26) 在 MapSubscriber.Subscriber.error (http://localhost:31534/libraries/rxjs/Subscriber.js:102:18) 在 MapSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26) 在 MapSubscriber.Subscriber.error (http://localhost:31534/libraries/rxjs/Subscriber.js:102:18) 在 LastSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26)

我已经关注Tour Of Heroes tutorial 并根据lazy load topic here 进行了改编 我首先在名为AppModule 的引导模块中加载登录页面{Home/Login}。单击登录时，我想显示下一页MyList、{Home/MyList}，它被延迟加载到名为MyModule 的功能模块中。

MyModule 基于上面第二个链接中的HeroModule。

MyList 页面和相关组件是MyModule 下的第一个页面/组件，它也有一个MyListDetail 页面/组件{Home/MyListDetail}。

我使用此代码在单击按钮时导航到 {Home/MyList}

let link = ['Home/MyList'];
this.router.navigate(link);

为什么找不到我的路线？这是我设置它们的方法。

app-routing.module.ts

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'Home/Login', pathMatch: 'full'},
  { path: 'Home/MyList', loadChildren: 'scripts/My.Module#MyModule' }  

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

login-routing.module.ts

import { NgModule }            from '@angular/core';
import { Router, RouterModule }        from '@angular/router';

import { LoginCmpnt }  from './Login';

@NgModule({
  imports: [RouterModule.forChild([
    { path: 'Home/Login', component: LoginCmpnt}
  ])],
  exports: [RouterModule]
})
export class LoginRoutingModule {}

MyList-routing.module.ts

import { NgModule }            from '@angular/core';
import { Routes } from '@angular/router';
import { RouterModule }        from '@angular/router';
import { SharedModule } from './shared.module';
import { MyComponent } from './MyComponent';
import { MyListComponent }  from './MyListComp';
import { MyListDetailComponent }  from './MyListDetailComp';

const routes: Routes = [
  { path: '',
    component: MyComponent,
    children:   [{ path: 'Home/MyList',    component: MyListComponent },
         { path: 'Home/MyListDetail/:id', component: MyListDetailComponent }]
  }];

@NgModule({
    imports: [RouterModule.forChild([routes]), SharedModule ],
    exports: [RouterModule]})

export class MyListRoutingModule {}

在上面的MyList-routing.module 中，我应该为MyComponent 的路径添加什么？登录方法路由到Home/MyList

编辑

即使在登录点击路径前的斜杠也不起作用。

let link = ['/Home/MyList'];
this.router.navigate(link);

Answer 1

延迟加载的模块大多是这样的：

 export class default MyModule{

 }

在app.routing 中，您最常使用 load Child。