保留已应用的过滤器 angular 5

Question

我需要保留已应用的过滤器。当我更改组件并 return 到前一个组件时，我希望应用过滤器 already.What 是最好的方法吗？

Answer 1

我建议将路由器视为真实来源。

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import {map} from 'rxjs/operators/map';

@Component({
  selector: 'my-app',
  template: `
  <select  [ngModel]="selected" (ngModelChange)="onSelectedChange($event)">
    <option *ngFor="let option of options" [value]="option">{{option}}</option>
  </select>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [
    'one', 'two', 'three'
  ]

  selected = 'one'

  private defaultSelectValue = 'one';

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.activatedRoute.queryParams.pipe(map(({selected}) => selected ||  this.defaultSelectValue))
      .subscribe(selected => this.selected = selected)
  }

  onSelectedChange(selected: string) {
    this.router.navigate([], { queryParams: { selected }})
  }
}

在ngOnInit中我们订阅了queryParams的变化并更新了组件selected的值。 [ngModel] 将使 <select> 值保持同步。
在 ngModelChange 上，我们导航到相同的组件，但使用不同的 queryParams。会触发我们之前在ngOnInit.

现在，只要您导航到其他地方，然后按后退按钮，select 将始终返回到之前 selected 的值。使用路由器作为真实来源的另一个好处是您可以为 url.

添加书签

Live demo。在 url 中玩转 ?selected=one。将其更改为 ?selected=two 并查看输入如何以正确的值开头。

Answer 2

您可以使用多种方法来完成此操作，例如路由参数、查询参数、可观察对象和本地存储。

我更喜欢使用相同的路由并更新您的过滤器值，这样您就可以从 queryParams 中获取它。

例如：

this._activatedRoute.queryParams.subscribe(param => {    
                    if (param['filterResults']) {
                        //:TODO
                    }
                });

或者你可以使用主题观察值

// angular
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Subscriber } from 'rxjs/Subscriber';
import 'rxjs/add/operator/map';

@Injectable()
export class MyService {
    events: any[];
    // Observable string sources
    emitDataChange= new Subject<any>();
    // Service message commands
    currentData = this.emitDataChange.asObservable();

    constructor(
        private http: appHttpService
    ) {
    }

    emitData(value: any) {
        this.emitDataChange.next(value);
    }
}

或者使用本地存储获取和设置过滤器

Page1.ts

gotoStudentDetails(stId: any) {
    let stFilter: any = JSON.stringify({
      advanceFilter: this.advanceFilterValue,
      currentPageIndex: this.currentPageIndex,
      prevPage: 'st-list'
    });
    localStorage.setItem('stFilter', stFilter);
    this._router.navigateByUrl('/std/st-details/' + stId);
  }

Page2.ts

ngOnInit() {
    if (localStorage.getItem('stFilter')) {
      let stFilter: any = JSON.parse(localStorage.getItem('stFilter'));
      if (stFilter && stFilter.prevPage === 'st-list') {
        this.advanceFilterValue = stFilter.advanceFilter;
        this.currentPageIndex = stFilter.currentPageIndex;
      }
    }

    //:TODO
  }

保留已应用的过滤器 angular 5

Keep applied filters angular 5

javascript

angular-routing

angular