Javascript 使应用的过滤器保持角度5

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

我建议将路由器视为真相的来源

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 }})
  }
}

从'@angular/core'导入{Component}；
从'@angular/Router'导入{Router，ActivatedRoute}；
从'rxjs/operators/map'导入{map}；
@组成部分({
选择器：“我的应用程序”，
模板：`
{{option}}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
选项=[
“一”，“二”，“三”
]
所选=‘一’
私有defaultSelectValue='one'；
建造师(
专用路由器：路由器，
私有激活路由：激活路由，
) {}
恩戈尼尼特（）{
this.activatedRoute.queryParams.pipe（映射（{selected}）=>selected | | this.defaultSelectValue））
.subscribe（selected=>this.selected=selected）
}
onSelectedChange（选定：字符串）{
this.router.navigate（[]，{queryParams:{selected}}）
}
}

在

ngOnInit

中，我们订阅queryParams更改并更新组件

所选的值<代码>[ngModel]

将保持

值同步

在

ngModelChange

上，我们导航到相同的组件，但使用不同的查询参数。它将触发我们之前在

ngOnInit

中订阅的queryParams流

现在，每当您导航到其他地方，然后按“上一步”按钮时，“选择”将始终返回到以前选择的值。将路由器用作真相来源的另一个好处是，您可以将url添加到书签中

---

。在url中玩

？选中=一个
。将其更改为
？selected=two
，然后查看输入如何以正确的值开始。
您可以使用许多方法来执行此操作，如路由参数、查询参数、可观测值和本地存储

我更喜欢使用相同的路由并更新过滤器值，这样您就可以从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);
    }
}

第2.ts页

我建议将路由器视为唯一的真相来源。因此，每当过滤器更改时，都会更新url（queryParams），并在组件OnInit中从url更新过滤器，我想保存完整网格对象的状态，就像我使用ag grid并希望保存它的状态一样。这不起作用。最好使用路由发送信息，这对发送过滤内容很重要。在这种情况下，您可以使用服务来保持状态。您需要本地存储作为其客户端数据，并且没有太大价值信息…OP没有提到关闭应用程序。只在他的角度应用程序中导航。在这种情况下，我们不需要涉及本地存储。但这当然是一个有效的选择：）
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);
  }

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
  }