Angular中如何结合Location服务使用pipe操作符

Angular的Location服务是用于和浏览器URL交互的工具，它支持通过subscribe()订阅popState事件，但如果想在订阅前用RxJS操作符做处理，你可以通过以下两种方式拿到它的可观察对象：

方式一：用RxJS包装原生事件 #

借助fromEvent操作符，把浏览器的popstate事件转换成Observable，同时结合Location的getState()获取当前历史状态：

import { fromEvent } from 'rxjs';
import { map, filter } from 'rxjs/operators';
import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {
  const popState$ = fromEvent(window, 'popstate').pipe(
    map(() => this.location.getState()),
    // 这里可以添加任意RxJS操作符，比如过滤特定状态
    filter(state => state?.someKey !== undefined)
  );

  popState$.subscribe(state => {
    // 处理拿到的状态
  });
}

方式二：封装Location的订阅为Observable #

如果想要更贴合Location服务的使用逻辑，可以自己封装一个返回Observable的方法：

import { Observable } from 'rxjs';
import { Location } from '@angular/common';

@Injectable()
export class CustomLocationService {
  constructor(private location: Location) {}

  getPopStateObservable(): Observable<any> {
    return new Observable(observer => {
      // 调用Location原生的subscribe方法，将事件流转发给Observable
      const sub = this.location.subscribe(state => {
        observer.next(state);
      });
      // 订阅销毁时清理原生订阅
      return () => sub.unsubscribe();
    });
  }
}

在组件中使用时就能直接通过管道操作符处理：

constructor(private customLocationService: CustomLocationService) {}

ngOnInit() {
  this.customLocationService.getPopStateObservable().pipe(
    // 加入你的RxJS操作逻辑
  ).subscribe(state => {
    // 处理状态
  });
}

本质上，这两种方式都是基于浏览器popstate事件的包装，目的就是让Location的事件流能兼容RxJS的管道操作能力。

内容的提问来源于stack exchange，提问作者Francesco Borzi