Angular 将 Router 注入 CanActivateFn 以在 runInInjectionContext 中使用

Question

我有一个守卫，需要获取异步内容，然后根据该值决定是否需要使用 URLTree 重定向用户。

代码本身非常简单：

export const otapGuard: CanActivateFn = async (route, state) => {
  let APPID = chrome.runtime.id;

  const { omgeving } = await chrome.storage.local.get('omgeving');

  if (omgeving === getAppEnvironment(APPID)) {
    return true;
  }

  inject(Router).createUrlTree([])
};

  {
    path: 'popup',
    loadChildren: () => import('./popup/popup.module').then(m => m.PopupModule),
    resolve: {
      user: TokenResolver
    },
    canActivate: [OtapGuard, MyMsalGuard]
  },

但是这是不可能的，因为等待后注入不可用。这基本上与以下问题相同：Angular ResolveFn - 必须从注入上下文调用inject()。但没有提供“代码”解决方案。

我需要使用 runInInjectionContext 并将路由器添加为注入，但我不明白如何做到这一点

Answer 1

您可以在等待之前注入路由器：

export const otapGuard: CanActivateFn = async (route, state) => {
  let APPID = chrome.runtime.id;
  const router = inject(Router);
  const { omgeving } = await chrome.storage.local.get('omgeving');

  if (omgeving === getAppEnvironment(APPID)) {
    return true;
  }

  return router.createUrlTree([])
};