错误：无法匹配任何路由。网址段答案

【问题标题】：Error: Cannot match any routes. URL Segment错误：无法匹配任何路由。网址段
【发布时间】：2018-09-01 10:31:11
【问题描述】：

我正在尝试在路由器内创建子级。但是，我无法在应用程序中呈现子组件。

这是我的代码：

<ul class="nav navbar-nav">
  <li class="active"><a routerLink="/portal/home">Início</a></li>
  <li><a routerLink="/portal/courses">Cursos</a></li>
  <li><a routerLink="">Ferramentas</a></li>
  <li><a routerLink="">Central de Ajuda</a></li>
</ul> 
<router-outlet name="dash"></router-outlet>

在上面我们可以看到我的部分 html 与路由器插座。

在routing.ts下面：

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'portal'
  },
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path:'',
        pathMatch: 'full',
        redirectTo: 'home'
      },
      {
        path: 'home',
        component: HomeComponent,
        outlet:'dash'
      },
      {
        path: 'courses',
        component: CoursesComponent,
        outlet:'dash'
      }
    ]
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
];

这里我们看不到其他组件，因为我正在尝试简化这里的代码。当我尝试点击课程时，错误是：

错误：无法匹配任何路由。 URL 段：门户/课程

我还有另一个页面，我在其中设置了一个路由器插座来处理上述代码。检查：

<main id="main">
<div id="main-content">
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>

<aside id="main-chat">
  <chat-dialog></chat-dialog>
</aside>
  </main>

【问题讨论】：

angular.io/api/router/RouterLink

标签： angular angular2-routing

【解决方案1】：

你必须把指令和目标路由放在括号中

<li class="active"><a [routerLink]="['/portal/home']">Início</a></li>
<li><a [routerLink]="['/portal/courses]'">Cursos</a></li>
<li><a [routerLink]="">Ferramentas</a></li>
<li><a [routerLink]="">Central de Ajuda</a></li>

【讨论】：

添加到@funkizer。这是 Angular 文档的链接，没有显示它：angular.io/guide/router
我猜在真正的路由器配置路径中有一个错字，因为@joavictortinoco 说他编辑了示例的代码。或者这里没有列出的其他路线有问题。
不。也不工作。我要更新完整的代码

【解决方案2】：

对我来说，routerLink 不在括号中，所以我收到了错误。
将routerLink放在括号内：

<ul class="nav navbar-nav">
  <li class="active"><a routerLink="/portal/home">Início</a></li>
  <li><a routerLink="/portal/courses">Cursos</a></li>
  <li><a routerLink="">Ferramentas</a></li>
  <li><a routerLink="">Central de Ajuda</a></li>
</ul> 
<router-outlet name="dash"></router-outlet>

要指出的另一件事是检查您的app.module.ts 是否导入了您的路由模块类。你的routing.ts 应该是这样的：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import....

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'portal'
  },
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path:'',
        pathMatch: 'full',
        redirectTo: 'home'
      },
      {
        path: 'home',
        component: HomeComponent,
        outlet:'dash'
      },
      {
        path: 'courses',
        component: CoursesComponent,
        outlet:'dash'
      }
    ]
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
];

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

  exports: [ RouterModule ]

})
export class RoutingModule { }

你的app.module.ts应该是这样的：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
....


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：