Angular 9 caminhos da mesma rota componentes diferentes

Question

Estou tentando resolver o caminho correto de um conjunto de URLs que compartilham a mesma estrutura. Eu tenho o caminho /:id/:areaIde /:id/:cityIdisso é feito por design por motivos de SEO. Quando eu for implementá-lo, preciso saber se :areaIdexiste (fazendo uma chamada de API) e, caso não :cityIdexista , tentarei verificar se existe para navegar até ele.

A primeira coisa que pensei foi no canActivateno meu percurso porque preciso injetar um serviço e me pareceu natural. Implementei o guarda e apliquei ao areacomponente e meu problema aqui é quando canActivateé falseporque a navegação para. Tenho lido sobre o uso de urlMatchers, porém não acho que tenho todas as informações necessárias nos segmentos e injetar serviços usando algo como Angular 2 componentes diferentes com a mesma rota parece errado para mim e também falha se eu tentar navegar diretamente para a URL em vez de navegar pela página inicial - o injetor não é definido quando navego diretamente.

Minha pergunta é, usando guardas ou algo semelhante, posso "navegar para a próxima URL correspondente" quando o resultado da minha guarda é falso?

Para referência, meu guarda tem a seguinte aparência:

@Injectable()
export class AreaGuard implements CanActivate {
    constructor(private areasService: AreasService) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const areaId= route.params['areaId'];
        return this.areasService.isArea(areaId)
                                .then(a => {
                                    return true;
                                })
                                .catch(e => {
                                    console.log('Checking area', e);
                                    return false;
                                });
    }
}

Answer 1

Se eu fosse você, criaria um Componentpara lidar com essa especificação. Fazer chamadas HTTP dentro Guardsdele é algo que eu não recomendo.

Você poderia ter apenas uma rota e carregar o novo componente criado. Faça suas chamadas HTTP e então com um simples *ngIfvocê poderá decidir qual componente carregar.