Angular 11 如何替换路由resolve默认函数实现点击按钮更新列表数据

问题核心原因 #

你当前的实现存在两个核心逻辑问题，导致新数据无法替换旧列表：

1. 执行顺序错误：先调用router.navigate跳转路由，此时resolve守卫会立刻执行拉取旧的全量数据，之后才调用的getEmploye，新数据完全没有参与到路由resolve流程
2. resolve守卫没有做类型适配：默认只会拉取全量用户数据，无法感知你要切换用户类型的需求

解决方案 #

步骤1：修改跳转逻辑，携带用户类型参数 #

修改component.ts中的routs方法，跳转时通过路由查询参数标记要查询的用户类型，不需要提前单独调用getEmploye：

routs(){
  // 跳转时携带类型参数，标识要查询员工类用户
  this.router.navigate(['/apps/e-commerce/products'], {
    queryParams: { userType: 'employee' }
  });
}

如果后续需要新增全量用户切换按钮，对应跳转传userType: 'all'或者不带参数即可。

步骤2：调整resolve守卫逻辑，按参数返回对应数据 #

修改service.ts中的resolve方法，先读取路由参数判断要拉取的用户类型，再执行对应接口：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return new Promise((resolve, reject) => {
        // 读取路由携带的用户类型参数
        const userType = route.queryParamMap.get('userType');
        const requestTask = userType === 'employee' ? this.getEmploye() : this.getProducts();

        Promise.all([requestTask]).then(
            () => {
                // 按类型返回对应数据
                resolve(userType === 'employee' ? this.product : this.products);
            },
            reject
        );
    });
}

步骤3：列表组件从路由快照拿数据 #

在用户列表组件的初始化钩子中，直接读取resolve返回的最新数据渲染表格即可：

userList: any[] = [];

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 此处的key需要和你路由配置中resolve的属性名对应
  this.userList = this.route.snapshot.data['userList'];
}

可选配置：同路由参数变化时重新执行resolve #

如果切换用户类型时路由地址不变仅参数变化，需要在路由配置中增加runGuardsAndResolvers配置，保证参数变化时会重新拉取数据：

// 路由配置处
{
  path: 'apps/e-commerce/products',
  component: ECommerceProductsComponent,
  resolve: { userList: EcommerceProductsService },
  // 新增这一行，参数变化时重新执行resolve守卫
  runGuardsAndResolvers: 'paramsOrQueryParamsChange'
}

内容的提问来源于stack exchange，提问作者chaykh