I have a route matcher function in Angular 7, need to do API call to get array and check if that array contains URL slug

What i tried: I called API on APP_INITIALIZER and saved it on localStorage, problem is that i have Angular Universal that don't have a localStorage, also cant inject any service into function that outside of typescript class to use CookieService or HttpClient service. Tried with Angular guard, but don't know how to skip to the next object in routes config array, in case when URL not found in categories array.

What i have now:

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

I expected somehow inject service into function DealsMatcher or do ajax request without injection. Also skip to next route checking if use angular guard.

0 Answers