Angolare 9 stesso percorso traccia componenti diversi

Aug 21 2020

Sto cercando di risolvere il percorso corretto di un insieme di URL che condividono la stessa struttura. Ho il percorso /:id/:areaIde /:id/:cityIdquesto viene fatto in base alla progettazione per motivi SEO. Quando vengo a implementarlo, ho bisogno di sapere se :areaIdesiste (effettuando una chiamata API) e in caso contrario cercherò di verificare se :cityIdesiste per raggiungerlo.

La prima cosa che ho pensato è stata canActivatenel mio percorso perché ho bisogno di iniettare un servizio e mi è sembrato naturale. Ho implementato la guardia e applicato al areacomponente e il mio problema qui è quando canActivateè falseperché la navigazione si ferma. Ho letto sull'uso di urlMatcher, tuttavia non penso di avere tutte le informazioni necessarie nei segmenti e l'iniezione di servizi utilizzando qualcosa come Angular 2 diversi componenti con lo stesso percorso mi sembra sbagliato e inoltre non riesce se provo a navigare direttamente all'URL invece di navigare tramite home - l'iniettore non è definito quando navigo direttamente.

La mia domanda è, utilizzando guards o qualcosa di simile, posso "passare all'URL corrispondente successivo" quando il risultato della mia guardia è falso?

Per riferimento, la mia guardia ha questo aspetto:

@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;
                                });
    }
}

Risposte

2 StPaulis Aug 21 2020 at 18:53

Se fossi in te, creerei un Componentper gestire questa specifica. Fare chiamate HTTP al Guardssuo interno è qualcosa che non consiglierei.

Potresti avere un solo percorso e caricare il nuovo componente creato. Fai le tue chiamate HTTP e poi con un semplice *ngIfpuoi decidere quale componente caricare.