Angular 11 - 延迟加载路由问题
Angular 11 - Lazy load routing issue
正在尝试使用 MEAN 堆栈创建 CRUD 操作。目前使用 Angular 11 cli,我创建了惰性模块。
惰性模块有 add/edit/list 个组件。为了列出数据,我使用了 Angular 材料。问题
我现在面临的是由于前端出现以下错误而无法导航到。
注意:这可能是重复的,但我已经看到了很少的 SO 解决方案,但不幸的是我无法修复它超过 3 小时。
可能有些人有眼力指出我在这里所做的问题
app-routing.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>
我的本地 url - http://localhost:4200/students
提前致谢
将您的路由器链接更改为
[routerLink]="['view', row._id]"
如果当前活动 URL 是 /students
然后点击 tr
将导航到 http://localhost:4200/students/view/607e79ee6d81777c6ee80919
如果您在 ['/view/', row._id]
之类的路径前添加 /
,则 URL 将导航至 http://localhost:4200/view/607e79ee6d81777c6ee80919
,无论当前活动的 URL 是什么。
正在尝试使用 MEAN 堆栈创建 CRUD 操作。目前使用 Angular 11 cli,我创建了惰性模块。 惰性模块有 add/edit/list 个组件。为了列出数据,我使用了 Angular 材料。问题 我现在面临的是由于前端出现以下错误而无法导航到。
注意:这可能是重复的,但我已经看到了很少的 SO 解决方案,但不幸的是我无法修复它超过 3 小时。
可能有些人有眼力指出我在这里所做的问题
app-routing.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>
我的本地 url - http://localhost:4200/students
提前致谢
将您的路由器链接更改为
[routerLink]="['view', row._id]"
如果当前活动 URL 是 /students
然后点击 tr
将导航到 http://localhost:4200/students/view/607e79ee6d81777c6ee80919
如果您在 ['/view/', row._id]
之类的路径前添加 /
,则 URL 将导航至 http://localhost:4200/view/607e79ee6d81777c6ee80919
,无论当前活动的 URL 是什么。