我在Visual Studio 2015 AspNetCore项目中使用Angular 2.1.0,并且在我的延迟加载模块中遇到路由问题 . 错误如下:
core.umd.js:3257 EXCEPTION:未捕获(在承诺中):错误:无法匹配任何路由 . 网址段:'Home / MyList'错误:无法匹配任何路由 . URL段:位于CatchSubsctsber.eval [作为选择器]的ApplyRedirects.noMatchError(http:// localhost:31534/libraries/@angular/router/bundles/router.umd.js:769:20)的'Home / MyList'(http :// localhost:31534/libraries/@angular/router/bundles/router.umd.js:747:33)at CatchSubscriber.error(http:// localhost:31534 / libraries / rxjs / operator / catch.js:52 :31)MapSubscriber.Subscriber._error(http:// localhost:31534 / libraries / rxjs / Subscriber.js:128:26)at 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)at MapSubscriber.Subscriber.error(http:// localhost) :31534 / libraries / rxjs / Subscriber.js:102:18)在LastSubscriber.Subscriber._error(http:// localhost:31534 / libraries / rxjs / Subscri) ber.js:128:26)
我按照Tour Of Heroes tutorial进行了调整并根据lazy load topic here进行了调整 . 我在Bootstrapped模块中首先加载一个登录页面 {Home/Login}
,名为 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 {}
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
EDIT
即使这样,登录点击路径前面的斜杠也不起作用 .
let link = ['/Home/MyList'];
this.router.navigate(link);
1 回答
延迟加载模块大多数是这样的:
并且在
app.routing
中你最常使用加载Child .