Question

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

core.umd.js：3257 EXCEPTION：未捕获（在承诺中）：错误：无法匹配任何路线。网址细分：＆＃39;主页/我的列表＆＃39;错误：无法匹配任何路线。网址细分：＆＃39;主页/我的列表＆＃39; 在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对其进行了调整我在名为{Home/Login}的Bootstrapped模块中首先加载一个登录页面AppModule。点击登录后，我想显示下一页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 {}

登录-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中你最常使用加载Child。

无法匹配Angular 2.1

1 个答案: