Условное перенаправление без использования компонента Angular

Question

У меня ленивый модуль, имеющий два компонента, первый и второй. Модуль загружен для маршрута lazy/:id. В зависимости от типа id (вызов API вернет тип id), мы должны загрузить первый или второй компонент. Чтобы достичь этого, в настоящее время третий компонент с именем resolver добавляется в lazyModule, который загружает для маршрута path:'' в lazyModule и выполняет вызов API для id. Ответ добавляется к URL, а this.router.navigate используется для перехода к компоненту first или second.

Проблема заключается в том, что эта функция используется в нескольких местах приложения, и я хотел бы использовать общий код в одном месте. Использование компонента с пустым шаблоном не является хорошей идеей. Есть ли другой способ добиться этого, возможно, с помощью guard/service/resolver или любой другой функции.

Я сделал минимальное воспроизведение для этого на стеке: https://stackblitz.com/edit/angular-8ylxq8?

Answer 1

Сервис будет работать - потому что сервис будет инжектором, и если вы просто внедрите свой сервис в root module, вы можете использовать его в любом модуле

Как это

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

Вам не нужно добавлять службу ни в один из массивов module provider - provideIn позаботится о внедрении в ваш корневой модуль

Наконец - вы думаете об использовании его во многихпомещает это тоже во время маршрутизации, чтобы вы могли вызывать эту услугу, когда происходит маршрутизация, и navigate на конкретный components - для доступа к какой-либо услуге перед маршрутизацией вы можете использовать route resolver

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}

Insted of this.backend.fetchTem() метод, которым вы можете позвонить в свою службу - чтобы вы могли удалить свой компонент и просто сопоставить свою resolver службу

{
    path: 'team/:id',
    component: TeamCmp,
    resolve: {
      team: TeamResolver
    }
  }

способ доступа к вашему resolver в маршрутизации !!так как resolver - это также сервис, вы можете использовать его на любом из ваших маршрутов

Надеюсь, это поможет - счастливого кодирования !!