Question

我的AppRouting模块中有以下代码：

...
const routes: Routes = [
  ...
  {
    path: 'events',
    data: { preload: true },
    loadChildren: './events/events.module#EventsModule'
  },
  ...
  {
    path: '**',
    component: PageNotFoundComponent
  }
];
...

这将加载Events模块，该模块将加载以下EventsRouting模块：

...
const routes: Routes = [
  ...
  {
    path: ':id',
    component: EventsComponent,
  },
  {
    path: '',
    component: EventsListComponent
  }
  ...
];
...

在EventsComponent构造函数中，我对网站的后端进行了http.get调用：

constructor(...) {

  route.paramMap.subscribe(params => {
  let eventId = params.get("id");
  http.get<EventDTObject>(baseUrl + "api/v1/Events/Get/" + eventId).subscribe(result => {

      if (result==null) router.navigate(['/404']);
      this.eventDTObject = result;

    }, error => console.error(error));
  });
}

除行外，所有这些都按照我想要的方式工作

if (result==null) router.navigate(['/404']);

虽然确实将用户重定向到正确的PageNotFoundComponent，但用户不能再按浏览器上的“后退”按钮以返回。这是因为每次加载上一页时，都会通过http.get请求再次导致404错误。

我想象一种解决方案，其中无需更改（因此将当前路由重定向到"/404"，而是可以使用打字稿在根路由模块中显示后备路由"**"。如果您尝试访问"**"模块中未指定的路由，则不会以相同的方式被重定向到，而是显示后备路由AppRouting的组成部分。

类似的东西：

http.get<...>(...).subscribe(result => {
  if (result==null) router.showDefaultRoute();
  ...
}

这可能吗？

（请注意嵌套路由）

Answer 1

位置服务和“返回”功能应该可以完成工作。位置服务应从较旧版本的Angular 2中的“ angular2 / router”导入。对于较新的“ @ angular / common”。以下是表单中有后退按钮的情况。

import {Component} from '@angular/core';
import {Location} from '@angular/common';


@Component({ directives: [ROUTER_DIRECTIVES] })
@RouteConfig([
    {...},
])
class AppComponent {
    constructor(private _location: Location) {
    }
    backClicked() {
        this._location.back();
    }
}

如果要在Web浏览器上单击后退按钮，请使用PlatformLocation，然后您可以定义 onPopState 。

this.location.onPopState(()=>{
  this.location.back();
});

如何在Angular 6中使用打字稿显示后备路线？

1 个答案: