Angular 使用 Rxjs 实现Url的监控与修改

需求

? 需要实现页面的操作记录在url上(包括翻页、查询等信息)

? 复制url到其它电脑或者浏览器可以呈现出原页面的数据

思路

? 页面操作实际是进行url的修改

? 当url改变时 页面数据变更

页面逻辑：

• 用户操作页面 进行url修改
• 监控url变更
• 根据url变更获取数据 更新页面信息

实现

有了思路就开始实现

首先实现一个修改url的function

考虑到可能有很多component需要修改url 而且url的组成都是 router + params 所以我们可以写一个公共的 setParams

/* 
urlData 中包含url信息 
router : url router 地址
queryParams : url参数 (调用setParams 之前拼接好)
*/
setParams(urlData: any): void {
    this._router.navigate([urlData.router],
      {
        queryParams: {
          params: JSON.stringify({urlData.queryParams})  // 这里使用JSON打包参数是为了保留数据的格式
        }
      }
    );
  }

然后我们需要用 Rxjs 的 subject 封装下这个 function

export class appService {
    
    private setUrlParamsSubject = new Subject<string>();
	setUrlParamsOb$ = this.setUrlParamsSubject.asObservable();

	constructor() {
		this.setUrlParamsOb$
			.subscribe((row) => {
    			this.setParams(row);
		});
	}

	setUrlParams(params: any): void {
    	this.setUrlParamsSubject.next(params);
	}
}

这样的话 其它所有的component 只需要调用this.appService.setUrlParams(params) 就可以进行url的修改

监控url的变化

这里使用router 中 ActivatedRoute 的方式监控url的变化

由于url添加参数的方式有两种 我这里是同时监控了两种参数变化

export class AppComponent implements OnInit {
 constructor(
    private _router: Router,
    private _routerInfo: ActivatedRoute,
  ) {  
      	merge(this._routerInfo.queryParams, this._routerInfo.params)
      		.subscribe((params: any) => {
            // 对参数进行解析
        	this.getParams();
      	});
    }
}

这样 我们就可以在每次url发生变化时候 在getParams 方法进行参数的解析

可是这样 我们只有AppComponent 这个component可以获得解析后的url参数

所以就需要下一步的操作

url 变化后 获取到url参数

这里的思路是和setUrl一样的 使用Rxjs 中的subject

subject 可以被订阅 这里使用subject 进行分发

所以思路就是

1. 设定一个getUrlParamsSubject 的 subject

2. 在任意一component 订阅这个 subject

3. 当getParams()解析完 数据之后 调用 getUrlParamsSubject.next(data) 的方法

4. 在订阅 getUrlParamsSubject 的 next方法中就可以获得这个参数的data

看下代码实现吧

// app.service.ts

private getUrlParamsSubject = new Subject<string>();

getUrlParamsOb$ = this.getUrlParamsSubject.asObservable();

getUrlParams(params: any): void {
    this.getUrlParamsSubject.next(params);
}

// app.component.ts
getParams(): void {
    
    console.log(this._routerInfo.snapshot.queryParams) // 获取url参数
    /*
    ... //这里是处理参数
    */
    
    this.appService.getUrlParams(paramsData);
}

// 任意component 
this.appService.getUrlParamsOb$
      .subscribe((row: any) => {
    	console.log(row) // 获得处理后的url参数
      });

最后只需要根据参数去更新页面信息就可以了

Angular 使用 Rxjs 实现Url的监控与修改