Angular url查询参数更改时角度4路由器重新加载视图

我有一个组件，它显示了可以使用url查询参数过滤的项目列表，这些项目是从api分页的，如果设置了过滤器，我需要再次调用第一个页面，第一个调用在路由器的解析程序中，所以我需要的是路由器以与来自其他url相同的方式重新加载

应用程序路由.ts

const appRoutes: Routes = [
    {
        path: 'applications',
        component: AppComponent,
        resolve: {
            data: AppResolve
        }
    },
]

@Injectable()
export class AppResolve implements Resolve<any> {
    constructor() {}
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
           // call to the api and the first 50 applications filtered by the url queryParams
    }
}

@Component({
    // ...
})
export class AppComponent {
    constructor(private route: ActivatedRoute,
              private appService: AppService) {
        this.route.data.subscribe((data: any) => {
            // recive the first 50 applications
        })
    }

    loadMoreApps(): void {
        // call to the api for the next 50 applications filtered by the url queryParams
    }
}

@Injectable()
export class AppService {
    constructor(private router: Router,
              private route: ActivatedRoute) {}
    navigate(urlQueryParams: any): void {
        this.router.navigate(['/applications'], {queryParams: urlQueryParams});
    }
}

---

app.resolver.ts

const appRoutes: Routes = [
    {
        path: 'applications',
        component: AppComponent,
        resolve: {
            data: AppResolve
        }
    },
]

@Injectable()
export class AppResolve implements Resolve<any> {
    constructor() {}
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
           // call to the api and the first 50 applications filtered by the url queryParams
    }
}

@Component({
    // ...
})
export class AppComponent {
    constructor(private route: ActivatedRoute,
              private appService: AppService) {
        this.route.data.subscribe((data: any) => {
            // recive the first 50 applications
        })
    }

    loadMoreApps(): void {
        // call to the api for the next 50 applications filtered by the url queryParams
    }
}

@Injectable()
export class AppService {
    constructor(private router: Router,
              private route: ActivatedRoute) {}
    navigate(urlQueryParams: any): void {
        this.router.navigate(['/applications'], {queryParams: urlQueryParams});
    }
}

---

app.service.ts

const appRoutes: Routes = [
    {
        path: 'applications',
        component: AppComponent,
        resolve: {
            data: AppResolve
        }
    },
]

@Injectable()
export class AppResolve implements Resolve<any> {
    constructor() {}
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
           // call to the api and the first 50 applications filtered by the url queryParams
    }
}

@Component({
    // ...
})
export class AppComponent {
    constructor(private route: ActivatedRoute,
              private appService: AppService) {
        this.route.data.subscribe((data: any) => {
            // recive the first 50 applications
        })
    }

    loadMoreApps(): void {
        // call to the api for the next 50 applications filtered by the url queryParams
    }
}

@Injectable()
export class AppService {
    constructor(private router: Router,
              private route: ActivatedRoute) {}
    navigate(urlQueryParams: any): void {
        this.router.navigate(['/applications'], {queryParams: urlQueryParams});
    }
}

---

其他.component.ts

const appRoutes: Routes = [
    {
        path: 'applications',
        component: AppComponent,
        resolve: {
            data: AppResolve
        }
    },
]

@Injectable()
export class AppResolve implements Resolve<any> {
    constructor() {}
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
           // call to the api and the first 50 applications filtered by the url queryParams
    }
}

@Component({
    // ...
})
export class AppComponent {
    constructor(private route: ActivatedRoute,
              private appService: AppService) {
        this.route.data.subscribe((data: any) => {
            // recive the first 50 applications
        })
    }

    loadMoreApps(): void {
        // call to the api for the next 50 applications filtered by the url queryParams
    }
}

@Injectable()
export class AppService {
    constructor(private router: Router,
              private route: ActivatedRoute) {}
    navigate(urlQueryParams: any): void {
        this.router.navigate(['/applications'], {queryParams: urlQueryParams});
    }
}

---

---

在路由中，通过以下方式将属性Runguard和Resolver设置为“始终”：

const appRoutes: Routes = [
{
    path: 'applications',
    component: AppComponent,
    resolve: {
        data: AppResolve
    },
    runGuardsAndResolvers: 'always' // <----- This line
}

const批准：路由=[
{
路径：“应用程序”，
组件：AppComponent，
决心：{
数据：AppResolve
},
runGuardsAndResolvers:'总是'//你能给我们看看你的代码吗？我已经把代码放好了属性名是runGuardsAndResolvers，无论如何谢谢你，我已经花了很多时间试着这么做了。