如何在 Angular 7 路由的匹配器函数中进行 API 调用答案

【问题标题】：How to do API call in Angular 7 route's matcher function如何在 Angular 7 路由的匹配器函数中进行 API 调用
【发布时间】：2019-09-27 23:26:28
【问题描述】：

我在 Angular 7 中有一个路由匹配器函数，需要调用 API 来获取数组并检查该数组是否包含 URL slug

我尝试了什么： 我在 APP_INITIALIZER 上调用 API 并将其保存在 localStorage 上，问题是我有没有 localStorage 的 Angular Universal，也无法将任何服务注入到 typescript 类之外的函数中以使用 CookieService 或 HttpClient 服务。尝试使用 Angular 守卫，但不知道如何跳到路由配置数组中的下一个对象，以防万一在类别数组中找不到 URL。

我现在拥有的：

export function DealsMatcher(url: UrlSegment[]): UrlMatchResult {

    if (url.length === 0) {
        return null;
    }
    let categories: HeaderCategoriesModel[];
    // TODO: need to get categories from API
    const param = url[0].toString();
    const index = categories.findIndex(category => {
        return category.title_translit === param;
    });

    if (index !== -1) {
        return ({consumed: url, posParams: {slug: url[0]}});
    }

    return null;

}

const routes: Routes = [
    {
        path: ':slug',
        matcher: DealsMatcher,
        component: DealsComponent,
    },
    {
        path: ':slug',
        matcher: DealsDetailMatcher,
        component: DealsDetailComponent,
        resolve: {
            deal: DealsDetailResolve
        }
    }
]

我希望以某种方式将服务注入到 DealsMatcher 函数中，或者在没有注入的情况下执行 ajax 请求。也跳到下一条路线检查是否使用角度防护。

【问题讨论】：

标签： angular typescript angular-routing angular-guards

【解决方案1】：

在启动应用程序时，我正在更改环境中变量的值，并在匹配器函数中使用此变量。

我没用过Universal Angular，不知道这样做会不会有问题

export function linuxMatcher(url: UrlSegment[]) {
  if (environment.linux) {
    return url.length === 1 && url[0].path.endsWith('firewall') ? { consumed: url } : null;
  }
  return null;
}

【讨论】：