Question

我有产品列表页面，我有所有数据显示用户，如果用户正在应用过滤器，我使用Angular 2在客户端本身过滤列表，

现在，如果用户前进到项目详细信息页面并单击浏览器后退按钮，则所有应用的过滤器都应该消失，但我需要实现，以便在后退按钮上应该保留所有应用的过滤器。

我在想的解决方案： -

方法：每当用户应用过滤器时，我们都会在网址中添加并重定向。

问题：在每个网址上都会调用重定向API。

有没有更好的方法可以解决这个问题？

Answer 1

将URL中的内容存储为参数是一种很好的方法，因为您不依赖于隐藏状态（全局应用程序变量）来构建视图。

但是，我不会拦截路由组件，而是使用Angular对结构化URL的支持，并在onInit方法中或在可用时过滤数据。

Answer 2

如果您希望过滤条件在URL中可见（并且可以加入书签），请使用路由器参数并重定向到包含更新参数的URL。如果使用routerCanReuse() { return true; }, then the component is not even reloaded but just routerOnReuse（）`，则可以获取更新的参数。

如果您不希望过滤条件出现在URL中，请使用共享服务来存储参数，然后导航不会破坏参数值。确保提供服务的提供程序足够高（例如AppComponent），以便在组件通过路由被破坏时不会被销毁。

Answer 3

我遇到类似的问题，添加的条件是，我必须将用户重定向回列表页面，并在使用保存功能时应用了过滤器。我使用的方法是梳理服务并在URL参数中使用过滤器。

使用两者的原因是，您可以通过3种方式进入产品详细信息页面：

来自产品列表。
直接来自网址。
来自其他人，您可能已经提供了链接。

因此您不能只使用this._location.back();，因为您可能不想在所有情况下重定向到最后一页。所以我的方法是将最后一个URL存储在服务中，并在详细信息组件中检查是否存在任何存储的URL。

这里重要的是检查并弹出ngOnInit()上存储的URL，因为用户可能并不总是点击保存。

将代码附加到服务，这是相当基本的。

@Injectable()
export class ReturnHistoryService {

   private _returnURL: string;

   saveReturnURL(returnURL: string) {
     this._returnURL = returnURL;
   }

   popReturnURL() {
       let returnURL = this._returnURL;
       this._returnURL = null;
       return returnURL;
   }

`

确保提供者不是每个组件。

在浏览器上保留应用的过滤器并转发Angular 2

3 个答案: