0

尝试使用 MEAN 堆栈创建 CRUD 操作。目前使用 Angular 11 cli，我创建了惰性模块。惰性模块具有添加/编辑/列表组件。为了列出数据，我使用了 Angular 材料。我面临的问题是由于前端出现以下错误而无法导航。

注意：这可能是重复的，但我已经看到了一些 SO 解决方案，但不幸的是我无法解决这个问题超过 3 小时。

可能有些人有很好的眼光来指出我在这里所做的问题

应用程序路由.module.ts

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'students', loadChildren: () => import('./demo-app/demo-app.module').then(m => m.DemoCrudAppModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

demo-crud-app-routing.module.ts

const routes: Routes = [
  
  { path: '', component: ListStudentsComponent, pathMatch: 'full' },
  { path: 'add', component: AddNewStudentsComponent },
  { path: 'view/:id', component: ViewStudentsDetailsComponent },
  { path: 'edit/:id', component: EditStudentsComponent }
];

当我尝试单击 mat-table 数据导航以查看学生详细信息时，出现控制台错误

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：'view/607e79ee6d81777c6ee80919'

查看学生详细信息-component.html

<table mat-table [dataSource]="data" class="mat-elevation-z8 list-tbl" matSort matSortActive="firstName"
      matSortDisableClear matSortDirection="asc" *ngIf="data && data.length > 0">
      <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->
      <ng-container matColumnDef="_id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let element">
          <a color="primary">{{ element._id }}

          </a>
        </td>
      </ng-container>
      <!-- Position Column -->
      <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef>Student Name</th>
        <td mat-cell *matCellDef="let element">{{ element.firstName }}</td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef>Age</th>
        <td mat-cell *matCellDef="let element">{{ element.age }}</td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let element">{{ element.status }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayColumns" [routerLink]="['/view/', row._id]"></tr>
    </table>

我的本地网址 - http://localhost:4200/students

提前致谢

4

1 回答 1

2

将您的路由器链接更改为

[routerLink]="['view', row._id]"

如果当前活动的 URL 正在/students单击，tr则将导航到http://localhost:4200/students/view/607e79ee6d81777c6ee80919

如果您/在路径之前添加，那么无论当前活动的 URL 是什么['/view/', row._id]，URL 都会导航到。http://localhost:4200/view/607e79ee6d81777c6ee80919

于 2021-04-21T06:20:06.000 回答