Angular 5：无法匹配任何路线答案

【问题标题】：Angular 5: Cannot match any routesAngular 5：无法匹配任何路线
【发布时间】：2018-09-29 10:07:24
【问题描述】：

我创建了一个 angular 5 应用程序，并定义了以下 app-routing.module.ts

import { ControlPanelComponent } from './dashboard/control-panel/control-panel.component';
import { MainComponent } from './dashboard/main/main.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  {path: 'dashboard', component: DashboardComponent,
    children: [
      {path: '', outlet: 'dashboard-outlet', component: MainComponent},
      {path: 'control', outlet: 'dashboard-outlet', component: ControlPanelComponent}
    ]
  }
];

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

这适用于以下路线：
http://localhost:4200
http://localhost:4200/dashboard

但不适用于
http://localhost:4200/dashboard/control

当我请求“仪表板/控制”时，控制台日志：

NavigationError(id: 2, url: '/dashboard/control', error: Error: Cannot match any routes. URL Segment: 'dashboard/control')

更新：

我的应用结构是

应用程序
- 仪表板（左侧导航与路由器链接在哪里）
  - 主要
  - 控制

这是仪表板中的左侧导航：

<!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
          <div class="menu_section">
            <h3>General</h3>
            <ul class="nav side-menu">
              <li><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-home"></i>Dashboard</a></li>
              <li><a><i class="fa fa-shield"></i> Options <span class="fa fa-chevron-down"></span></a>
                <ul class="nav child_menu">
                  <li><a [routerLink]="['./control']" routerLinkActive="active">Control Panel</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <!-- /sidebar menu -->

仪表板中的页面内容是路由器插座

<!-- page content -->
    <div class="right_col" role="main">
      <div class="">
        <div class="page-title">
          <div class="title_left">
            <h3>{{dashboard.pageTitle}}</h3>
          </div>
        </div>

        <div class="clearfix"></div>

        <router-outlet name="dashboard-outlet"></router-outlet>
      </div>
    </div>
    <!-- /page content -->

我可以看到仪表板中的链接正确呈现：

http://localhost:4200/dashboard/control

但是当我点击它时，什么也没有发生，控制台报告

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/control'

任何帮助将不胜感激

【问题讨论】：

你能告诉我们你的 routerLink 定义吗？
可能是因为你没有在routerLink中指定出口？
在您定义[routerLink]的地方分享您的html代码
我包含了其他应用程序部分，谢谢

标签： angular typescript routing

【解决方案1】：

为了解决路由问题，我只是在路由器链接中放入了必须渲染页面的相应出口：

<li><a [routerLink]="[{ outlets: { 'dashboard-outlet': ['control'] } }]" routerLinkActive="active">Control Panel</a></li>

【讨论】：

【解决方案2】：

您的子路由中的空路径缺少 pathMatch: 'full'

 children: [
  {path: '', outlet: 'dashboard-outlet', component: MainComponent, pathMatch: 'full'},
  {path: 'control', outlet: 'dashboard-outlet', component: 
    ControlPanelComponent}
  ]
}

【讨论】：

【解决方案3】：

试试

[routerLink]="['./control']"

它是/dashboard的子路由，放一个点.

【讨论】：

不起作用，链接渲染正确但在路由器组件中仍然找不到路由