Angular 11-懒惰负载路由问题

Question

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

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

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

应用程序路由模块.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' }
];

演示crud应用程序路由模块.ts

const routes: Routes = [

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

当我试图点击垫子表数据来浏览学生详细信息时，我在控制台下面得到了错误

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

查看学生详细信息组件.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>

我的本地url-http://localhost:4200/students

提前感谢

Answer 1

将路由器链接更改为

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

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

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