Angular 7 使用 location.back() 和浏览器后退按钮不会保留状态答案

【问题标题】：Angular 7 use location.back() and browser back btn won't preserve stateAngular 7 使用 location.back() 和浏览器后退按钮不会保留状态
【发布时间】：2019-08-20 05:39:33
【问题描述】：

我在列表页面中有一些选项卡和过滤器，当我转到详细信息页面并点击浏览器后退按钮时，过滤后的列表页面会失去过滤器和分页状态。

实现细节

List Page
|-> reference filter component (from another module)
|-> reference pagination component  (from another module)
|-> invoke httpClient in onInit event

问题：

是否默认保留历史记录？
如果我希望它保留以前的页面状态，我应该怎么做？

【问题讨论】：

使用 Angular 路由器的导航方法进行导航，同时保持历史记录。
错字警报：preserve - 不是“preseve” ....
@alt255 我正在使用导航方法，Location 来自 angular/common，但 ngInit 总是触发

标签： angular

【解决方案1】：

仅保存 url，当您在组件之间导航时，您可以将过滤器保存在 url 中。无论如何，当您导航到另一个页面组件时，页面组件将被销毁，但是您可以在返回导航后从 url 恢复它的状态。

如果您不想将过滤器保存在 url 中，您可以创建一个服务来保存状态。您应该将状态服务注入到您的主/详细信息组件的容器组件中，因此当您在主/详细信息组件之间导航时状态将处于活动状态，但当您导航到另一个组件时它会自动销毁零件。例如：

// app.module.ts

const appRoutes: Routes = [
    ...
    { path: 'list', component: ListContainerComponent, children: [
        { path: '', component: ListComponent },
        { path: 'list/:itemId', ListItemComponent }
    ]},
];

// list-container.component.ts

@Component({
    template: '<router-outlet></router-outlet>',
    providers: [
        ListSearchStateService
    ]
})
export class ListContainerComponent {}

// list.component.ts

@Component({ ... })
export class ListComponent {
    constructor(
        // state service is available here, you can save the filters inside
        readonly searchState: ListSearchStateService
    ){}
}

另一种方法可能是使用应用程序全局状态管理框架，例如 NgRx store。但是这个解决方案将对应用程序架构产生巨大影响，因此它应该是一个明智的决定。看看这篇不错的文章：Angular Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why? 文章中还介绍了第二种解决方案，请参阅创建清理自身的本地状态部分。

【讨论】：

有些状态是不能在url中存储和恢复的，例如：滚动条状态，但是angular.io也可以保存滚动条状态，普通页面（不是SPA）浏览器会存储每个状态当前页面，当您返回时，浏览器将恢复所有内容，
@John 通常浏览器应用程序不会存储滚动位置等状态。 angular.io 怎么样，我查看了 the sources 内部，根本没有 router-outlet。看起来它使用了自定义导航逻辑，以某种方式保留了状态。
@John 如果您仍然对这个问题感兴趣，我已经添加了另外两个解决方案，希望对您有所帮助。