Question

我收到了这个错误，但没有得到我错的地方。

路线如下，

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register-user', component: RegisterUserComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'dash', component: SideNavComponent,
  children: [
    {path: 'rides', component: RidesComponent,  pathMatch: 'full'}
  ]}];

app.component.html是，

<router-outlet></router-outlet>

SideNavComponent HTML是，

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar> 
      <div class="logo-container">
      <img src="/assets/images/Yaana-logo-white.png" class="logoDiv"/>
      </div>  
    </mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
      <nav class="sidenavbutton">
        <button class="cmpbtn" mat-button (click)="onUserInfoClicked()">User Info<mat-icon id="icon">{{userInfoIcon}}</mat-icon></button>
        <ul class="subbtn" *ngIf="showUserSubs === true">
            <li class="sub-menu"> <a routerLink="/rides" routerLinkActive="active">Rides </a></li>
        </ul>
      </nav>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="accent">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span></span>
    </mat-toolbar>
   <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

SideNavComponent包含，以在工具栏下方显示SideNavComponent的子组件。

但是当我尝试导航到RidesComponent时

http://localhost:4200/dash/rides

，我收到以下错误，

Error: Cannot match any routes. URL Segment: 'rides'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
    at CatchSubscriber.selector (router.js:1340)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
    at CatchSubscriber.selector (router.js:1340)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3662)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

如果我错了，请纠正我。

的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Answer 1

原因

<a routerLink="rides" routerLinkActive="active">Rides </a></li>

工作和

<a routerLink="/rides" routerLinkActive="active">Rides </a></li>

这不是那个，

第一个是相对路径，其中第二个是绝对路径。

因此，当您单击第一个链接时，angular会将routerLink附加到当前路径，而在第二个链接中，angular将其附加到应用程序上下文根，而不考虑当前URL。

我希望有人能从中受益。：）

Answer 2

您似乎忘了添加<base href="/">。请在 index.html 中添加。

Answer 3

{path: 'rides', component: RidesComponent}会达到目的，你不需要pathMatch: 'full'，休息对我来说很好。

Answer 4

经过一些试验，我发现了解决方案，这是routerlink部分的问题，

这是我所做的改变，

 <li class="sub-menu"> <a routerLink="rides" routerLinkActive="active">Rides </a></li>

现在这很好用。

Answer 5

<li class="sub-menu"> <a routerLink="/dash/rides" routerLinkActive="active">Rides </a></li>

错误：无法匹配任何路由。网址细分：＆＃39; rides＆＃39;

5 个答案: