Angular 4路由器在url queryParams更改时重新加载视图

Question

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

app.routes.ts

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

app.resolver.ts

@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
    }
}

app.component.ts

@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
    }
}

app.service.ts

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

其他.ts组件

@Component({
    // ...
})
export class OtherComponent {
    constructor(private appService: AppService) {}
    filterApps(): void {
        const filters = {
            'category': 'game',
            'author': 'username'
        }
        this.appService.navigate(filters)
    }
}

Answer 1

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

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

]

这将在您每次访问路线时执行解析。

问候