Angular 重新加载：动态 TenantID 识别和通用数据更新实现

Question

在我的Angular应用程序中，我遇到需要在页面重新加载时检查tenantId并加载相关信息。目前，我已在代码中的多个位置（每个组件中）直接实现了此逻辑。但是，我想集中此实现以避免冗余。如何创建一个可以从任何组件轻松调用的通用解决方案？

以下是我的实现

//checking the route when reloading the page
this.route.paramMap
.pipe(
  takeUntil(this._unsubscribeAll),
  switchMap((params: Params) => {
    const tenantId = params.get('tenantId');
    if (tenantId) {
      return this._apiService.getTenants();
    } else {
      return of(null); // No tenantId, return an observable to avoid unnecessary subscriptions
    }
  }),
  filter(tenants => tenants !== null),
  take(1) // only need 1 take tenant
).subscribe(
  (tenants: Tenant[]) => {
    const tenantId = this.route.snapshot.paramMap.get('tenantId'); 
    const activeRouteTenant = tenants.find(
      tenant => tenant.name === tenantId
    );
    if (activeRouteTenant) {
      this._tenantService.updateTenant(activeRouteTenant);
    }
       // Ensure components are checked for changes
       this._changeDetectorRef.markForCheck();
       this.initialDashboardInformation()
  }
)

您能帮我一下吗 非常感谢 :D

Answer 1

您可以尝试使用路线守卫。 canActivate 的第一个参数是路线的快照。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
   console.log(route.paramMap.get('tenantId'));
}

路线防护可以与多个组件一起使用。