如何在 Angular2 中使用动态默认路由？

Question

问题：根据用户的许可，应该使用另一个默认路由。

@RouteConfig([
    { path: '/x1', name: 'x1', component: X1Component, useAsDefault: true },
    { path: '/x2', name: 'x2', component: X2Component},
    { path: '/x3', name: 'x3', component: X3Component},
    { path: '/x4', name: 'x4', component: X4Component},
    { path: '/x5', name: 'x5', component: X5Component}
])

在上面 RouteConfig 中给定 x1 作为默认路由，但当前用户没有访问此页面的权限，如果授予权限，应使用 x2 作为默认路由等等。

无论如何，我们已经尝试过属性 loader。问题是，url 不会更新（例如从 /x1 到 x2），这会发生其他问题，例如没有 css class router-link-active 自动附加到我们菜单中的 link。

当然我们可以写一个解决方法，但你是如何解决这类问题的？

Answer 1

我不认为在运行时更改默认路由是可能的。

我认为一种常见的方法是向需要登录的组件添加一个 @CanActivate() 装饰器，如果用户实际上没有登录，则重定向到适当的路由。

要知道当前用户是否登录，您可能想使用 DI 获取有关用户状态的全局信息。
您还需要对可以从 DI 获得的根路由器实例的引用。目前不直接支持在 @CanActivate() 中使用 DI，但中的讨论提供了一种解决方法（使用 Plunker 链接）来获取对全局注入器的引用。

另见

Answer 2

要动态更改 Angular 应用程序的默认路由，目前我正在使用以下方法。

最后一条带守卫的后备路线：

...
{
    path: '**',
    canActivate: [DynamicDefaultRouteGuard],
    pathMatch: 'full'
}

守卫如下：

@Injectable({
    providedIn: 'root'
})
export class DynamicDefaultRouteGuard implements CanActivate {
    constructor(private router: Router, private dynamicDefaultMenuSectionService: DynamicDefaultMenuSectionService) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        console.warn(
            `Fallback main module route reached. Redirecting to ${this.dynamicDefaultMenuSectionService.defaultMenuSection}...`
        );

        return this.router.createUrlTree([this.dynamicDefaultMenuSectionService.defaultMenuSection]);
    }
}

其中 dynamicDefaultMenuSectionService.defaultMenuSection 是具有默认路由的变量。此变量在应用程序初始化期间初始化 (APP_INITIALIZER)，但可以随时更改。

如何在 Angular2 中使用动态默认路由？

How to use dynamic default route in Angular2?

typescript

angular

angular2-routing