我有一个Angular 8应用程序,该应用程序从SQLite数据库加载设备并将它们全部显示在名为“ monitoring”的URL中。当我希望用户查看有关当前设备的详细信息时,将其重定向到““ monitoring /:id”都可以正常工作!但是,如果用户刷新URL“ monitoring /:id”,则所选设备为null,我得到以下信息错误“未捕获(承诺):错误:无法匹配任何路由。 URL段:“ 123””。这是root的Route模块
app.module.ts
RouterModule.forRoot([
{ path: '', redirectTo: '/monitoring', pathMatch: 'full' },
{ path: 'monitoring', component: AppMonitoring, pathMatch: 'full', data: { state: 'monitor' }, },
{ path: "monitoring/:id", component: DeviceMeasurements, },
{ path: 'management', component: AppManagement, pathMatch: 'full', data: { state: 'manage' } },
{ path: 'system', component: AppSystemSettings, pathMatch: 'full', data: { state: 'system' }, },
{ path: 'notifications', component: AppSettingsNotifications, pathMatch: 'full', data: { state: 'notifications' }, },
], { useHash: true }
)],
请告诉我是否需要更多信息,以及如何解决此问题? 谢谢您的时间!
编辑:这是重定向网址的HTML
<a class="pull-left" href="#" (click)="DeviceDelete()" onclick="return false;" matTooltip="{{language_service.getText(this.language_service.ITEMS.DEVICE_DELETE)}}"> <i class="nav-icon fa fa-trash"></i> </a>
ViewMeasurements的内容
ViewMeasurements() {
this.device_service.SetCurrentDevice(this.device);
this.router.navigateByUrl(`/monitoring/${this.device.id}`);
}
SetCurrentDevice的内容
SetCurrentDevice(device: DeviceInterface) {
this.InitCurrentDevice.next(device);
}
我还有一个GetCurrentDevice函数,该函数在动态ID页面中调用
GetCurrentDevice(): DeviceInterface {
return this.InitCurrentDevice.getValue();
}
并在动态页面中像这样使用它
ngOnInit() {
this.device = this.device_service.GetCurrentDevice();
}
我已经在ngOnInit函数中尝试了以下操作,但导致了相同的错误
let n = window.location.href.lastIndexOf('/');
let id = window.location.href.substring(n + 1);
if(this.device==null){
this._router.navigateByUrl('/monitoring', { skipLocationChange: true }).then(() => {
this._router.navigate(['/monitoring/' + id]);
});
}
答案 0 :(得分:1)
将此路径{ path: '', redirectTo: '/monitoring', pathMatch: 'full' }
放在路径对象的底部。