首页 文章

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

提问于
浏览
2

我在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 回答

  • -1

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

    export class default MyModule{
    
     }
    

    并且在 app.routing 中你最常使用加载Child .

相关问题