angular更新url參數(shù)和component中的內(nèi)容的方法

大概的介紹如圖。就是想點擊button更新url的部分參數(shù)，然后在根據(jù)參數(shù)來獲取content中的內(nèi)容

routing檢測和content 更新.png

pagination component

setPage(clickedPage) {
        // back to the top of the window
        document.documentElement.scrollTop = 0;
        
        this.currentPage = clickedPage;
        if (this.currentPage - 2 <= 1) {
            this.start = 1;
            this.end = this.start + 4
        } else if (this.currentPage + 2 > this.totalPageNumber) {
            this.start = this.totalPageNumber - 4
            this.end = this.totalPageNumber;
        }
        else {
            this.currentPage = this.currentPage;
            this.start = this.currentPage - 2;
            this.end = this.currentPage + 2;
        }

        this.setPageArray();

        // this.currentPageToParentEvent.emit(this.currentPage);
        this.router.navigate([], { relativeTo: this.activatedRouter, queryParams:{page: clickedPage}, queryParamsHandling: "merge"});
    }

最關(guān)鍵的是下面的代碼

this.router.navigate([], { relativeTo: this.activatedRouter, queryParams:{page: clickedPage}, 

注意，activatedRouter是要import activatedRouter的

這里可以部分更新url

        this.activatedRoute.queryParamMap.subscribe(queryParams => {
            console.log(Number(queryParams['params']['page']));
            this.listtingService
                .retriveSearchListing(Number(queryParams['params']['page']))
                .subscribe((response: any) => {
                    console.log(response);
                    this.jobs = response.data;
                    this.totalPageNumber = response.totalPageNumber;
                });
        })

以上是content使用的，subscribe to the url changes, 根據(jù)changes來更新content中的內(nèi)容。
完美解決