返回页面时的Angular 2重定向网址答案

【问题标题】：Angular 2 redirect url when going back to the page返回页面时的Angular 2重定向网址
【发布时间】：2018-02-11 09:07:57
【问题描述】：

我有一个具有这种类型路由模型的 Angular 2 页面：

const routes: Routes = [
   { path: '', pathMatch: 'prefix', redirectTo: 'announcement' },
   { path: 'announcement', component: AnnouncementComponent },
   { path: 'important-documents', component: ImportantDocumentsComponent },
   { path: 'reservations-and-orders', component: ReservationsAndOrdersComponent},
   { path: 'contact', component: ContactComponent },
   { path: '**', redirectTo: 'announcement'}
 ];

当我在我的重要文档组件中打开一个 pdf 文件，然后尝试通过按浏览器中的后退按钮返回上一页时，就会出现问题。该页面通知我在此服务器中找不到请求的 url。我假设发生这种情况是因为实际上角度页面只有一个 url，并且浏览器正在尝试加载页面 url + 路径。我想我可以用这个来解决它：

 { path: '**', redirectTo: 'announcement'}

但它似乎没有起到作用。

我想知道如何防止这种类型的url错误发生，以便浏览器在返回时重定向到正确的url。

提前谢谢了。

【问题讨论】：

如果只需要重定向无效路径，请尝试这样 - { path: '**', component: AnnouncementComponent } 只需将作为您在 sn-p 中显示的最后一个路径
没用。它只是破坏了路由模块并将所有路径重新路由到 AnnouncementComponent。

标签： angular routing

【解决方案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();
    }
}

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

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

【讨论】：