错误:无法匹配任何路线。页面刷新时页面上的URL段刷新

时间:2020-06-23 08:59:22

标签: angular typescript routes

我有一个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]);
        });

}

1 个答案:

答案 0 :(得分:1)

将此路径{ path: '', redirectTo: '/monitoring', pathMatch: 'full' }放在路径对象的底部。