更新url参数以及根据参数来获取资源的设定(Detecting url changes and updating content in component)

angular更新url参数和component中的内容的方法

大概的介绍如图。就是想点击button更新url的部分参数，然后在根据参数来获取content中的内容

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

最关键的是下面的代码

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, 根据changes来更新content中的内容。
完美解决