Angular 9条相同的路由路径不同的组件

Question

我正在尝试解析一组共享相同结构的 URL 的正确路径。我有路径 /:id/:areaId 和 /:id/:cityId，这是出于 SEO 原因设计的。当我开始实施它时，我需要知道 :areaId 是否存在（通过调用 API），如果不存在，我将尝试检查 :cityId 是否存在以导航到它。

我首先想到的是路由中的 canActivate，因为我需要注入一个服务，这对我来说似乎很自然。我实现了保护并应用于 area 组件，我的问题是 canActivate 是 false 因为导航停止。我一直在阅读有关使用 urlMatchers 的信息，但是我认为我没有段中需要的所有信息，并且使用 Angular 2 different components with same route 之类的东西注入服务对我来说似乎是错误的，而且如果我尝试直接导航到它也会失败URL 与通过主页导航相反 - 当我直接导航时未定义注入器。

我的问题是，使用守卫或类似的东西，当我的守卫结果为假时，我可以“导航到下一个匹配 URL”吗？

作为参考，我的守卫长这样：

@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

如果我是你，我会创建一个 Component 来处理这个规范。在内部进行 HTTP 调用 Guards 我不推荐这样做。

您可以只有一条路线并加载您新创建的组件。执行您的 HTTP 调用，然后使用简单的 *ngIf 您可以决定使用哪个组件加载。

Angular 9条相同的路由路径不同的组件

Angular 9 same route paths different components

angular

angular-router

angular-route-guards