Question

我需要保留应用过滤器。当我更改组件并返回上一个组件时，我希望过滤器已经应用。最好的方法是什么？

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。

现在，只要您在其他地方导航，然后按后退按钮，选择将始终返回到先前选择的值。使用路由器作为事实来源的另一个好处是你可以为网址添加书签。

Live demo。在网址中使用?selected=one。将其更改为?selected=two并查看输入如何以正确的值开始。

Answer 2

您可以使用多种方式执行此操作，例如route params，queryParams，observables和localstorage。

我更喜欢使用相同的路线并更新您的过滤器值，因此您可以从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
  }

保持应用过滤器的角度为5

2 个答案: