Angular 使用 Rxjs 實現Url的監控與修改

阿新 • • 發佈：2021-06-18

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 進行分發

所以思路就是

設定一個getUrlParamsSubject 的 subject
在任意一component 訂閱這個 subject
當getParams()解析完資料之後呼叫 getUrlParamsSubject.next(data) 的方法
在訂閱 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引數
      });

最後只需要根據引數去更新頁面資訊就可以了