Angular2 EXCEPTION：错误：未捕获（承诺）：错误：无法匹配任何路线：

当我使用router.navigateByUrl方法时，我目前遇到我的Angular2应用程序出现问题。我有一个在我的组件调用goToRoute功能，它看起来像这样：Angular2 EXCEPTION：错误：未捕获（承诺）：错误：无法匹配任何路线：

router.goToRoute(route:string, event?:Event):void { 
     if (event) { 
      if (event.defaultPrevented) { 
       return; 
      } 
      event.preventDefault(); 
     } 

     this.router.navigateByUrl(route); // prefixing with '/' does nothing here... 
     // if the menu has been clicked and it was open close it! 
     if (this.menuOpen) { 
      this.toggleHamburger();

}}

我会在我的HTML像这样使用在ngFor ...

<div *ngFor="let route of routes "> 
    <div (click)="goToRoute(route.path, $event)"> {{ route.display }} </div> 
</div>

现在当我点击一个div我得到的错误：

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us' 
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'about-us' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'about-us'(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us'(…)

这是奇怪，因为在我的路线，我有以下（DisplayRoutes是我通过扩展路由对象进行自定义类型）：

export const routes:DisplayRoutes = [ 
    { 
     path: '', 
     display: 'Home', 
     component: HomeComponent 
    }, { 
     path: 'about-us', 
     display: 'About us', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      } 
     ] 
    }, { 
     path: 'teams', 
     display: 'Teams', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      } 
     ] 
    } 
];

正如你可以看到我有一个名为“关于美”路线！出于某种原因，尽管名称匹配的路径不匹配？我把控制台登录我goToRoute方法输出route和event看到正在通过什么......我这...

about-us MouseEvent {isTrusted: true, screenX: 1809, screenY: 382, clientX: 42, clientY: 144…}

我目前从"@ngrx/router": "^1.0.0-beta.1"切换到"@angular/router": "3.0.0-beta.2"。我有一个基本标记，当我使用router.navigateByUrl时，事情似乎会崩溃。然后我注意到，如果我深入链接，会发生同样的情况，例如当我在浏览器中访问http://localhost:4200/about-us时。

任何意见表示赞赏。

来源

2016-08-02 Mark Sandman

好吧，所以它不是前缀'/'，我没有建议，然后，对不起:) –

你必须在那里有前缀'/'。

其次，由于关于我们是非终止路线（有子女），您需要定义一个具有''(empty)路径的子女。它可能会重定向到任何现有的路由。

{path: '', redirectTo: 'other-path', pathMatch: 'full'}

其次我假设你的扩展将负责显示和索引var在配置中，因为它不在默认路由类型中。

看一看官方tutorial

另一个问题，所以详细介绍了如何使用multi level routing。

来源

2016-08-02 17:25:22

您好，前缀创建一个错误，但我认为添加重定向已使路由功能。 –

Angular2 EXCEPTION：错误：未捕获（承诺）：错误：无法匹配任何路线：

回答

相关问题