代码之家 › 专栏 › 技术社区 › Ajay Kulkarni

路由器与导航上的路线不匹配

angular-router angular

Ajay Kulkarni · 技术社区 · 5 月前

我有一个 HTML 代码:

      <table mat-table [dataSource]="claims" matSort class="mat-elevation-z8">
        <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ titleCase(column) }}</th>
      
          <td mat-cell *matCellDef="let element">
            <!-- Add clickable links for Claim Id -->
            <ng-container *ngIf="column === 'claimID'; else defaultCell">
              <a href="#" (click)="onClaimIdClick(element[column])">
                {{ element[column] }}
              </a>
            </ng-container>
            <ng-template #defaultCell>
              {{ getElementValue(element, column) }}
            </ng-template>
          </td>
        </ng-container>
      
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

我补充道,它正确加载了表格 click 功能到 claimId 列。
TS代码为:

onClaimIdClick(claimId: string): void {
    console.log('Navigating to:', `/claims-summary/${claimId}`);
    this.router.navigate(['/claims-summary', claimId]);
  }

当我点击以下条目时 claimId ,它重定向到下一页,但调用了不匹配的路由。这是我的 app.routes.ts .

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component';
import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component';
import { ClaimsComponent } from './components/claims/claims.component';

export const routes: Routes = [
    { path: '', component: LoginComponent }, // Default route for login
    { path: 'home', component: HomeComponent }, // route for home
    { path: 'claims', component: ClaimsComponent }, // route for claims
    { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary
    { path: 'claims-insights/:type', component: ClaimsInsightsComponent },
    { path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page)
];

如果我打开新的url,http://localhost:4200/claims-summary/claimId在一个新的选项卡中,它可以完美加载。但当我试图通过以下方式导航到该页面时 onClick ,它重定向到 claim-summary ,但每次都调用不匹配的路由。我在这里错过了什么?

2 回复 | 直到 5 月前

JSON Derulo 5 月前

修复标记:防止默认行为:

<a (click)="onClaimIdClick(element[column])">{{ element[column] }}</a>

验证路由:确保此.router.navigation(['/reclaims summary',claimId]);匹配路线:
```
{ path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }
```
检查标签:确保它在index.html中:
```
<base href="/" />
```
启用路由器跟踪:要进行调试,请加载app.module.ts:
```
RouterModule.forRoot(routes, { enableTracing: true });
```

可选:使用[routerLink]进行更简单的导航:

<a [routerLink]="['/claims-summary', element[column]]">{{ element[column] }}</a>

请检查并确认其是否正常工作

Ravi Gaud 5 月前

更新html标签:

<a href="javascript:void(0)" (click)="onClaimIdClick(element[column])">
 {{ element[column] }}
</a>