Angular 2具有相同路线的不同组件

Question

我有一个应用程序，它需要将经过身份验证的用户和 guest 用户组件分开。但我需要，这两个组件都将通过“/”路径加载。我写了

{
    path: 'desktop',
    loadChildren: 'app/member/member.module#MemberModule',
    canActivate: [LoggedInGuard],
},
{
    path: '',
    loadChildren: 'app/guest/guest.module#GuestModule',
    canActivate: [GuestGuard],
},

而且它有效。但是如何让两个组件都通过相同的 url 加载呢？我曾尝试为 Member 的模块路由编写 path: ''，但未执行第二个路由器规则。这是守卫代码:

LoggedInGuard:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if(this.sessionService.isLoggedIn()) {
        return true;
    } else {
        return false;
    }
}

GuestGuard:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if(!this.sessionService.isLoggedIn()) {
        return true;
    } else {
        return false;
    }
}

这是一个笨蛋:http://embed.plnkr.co/VaiibEVGE79QU8toWSg6/

我应该如何正确操作？谢谢

Answer 1

所以我终于能够做到这一点。问题是 Angular 使用优先匹配策略，所以我们需要以守卫类型的方式匹配路由，以确保匹配正确的路由和正确的模块。

首先我们需要添加自定义 matchers对于我们的路由，它只会在我们想要的条件下匹配它们(例如用户类型)。

{
 path: 'samePath',
 matcher: firstMatcher,
 loadChildren: '../first/first.module#FirstModule'
},
{
 path: 'samePath',
 matcher: secondMatcher,
 loadChildren: '../second/second.module#SecondModule'
}

匹配器代码是这样的:在这里，我从 AppModule 注入(inject)了 AuthService 服务，并使用它检查用户类型。因此可以根据用户类型匹配路由。

import { applicationInjector } from '../../main';

export function firstMatcher (url: UrlSegment[]) {
  const auth =  applicationInjector.get(AuthService);
  return auth.isUserType('admin') ? ({consumed: [url[0]]}) : null;
}

现在我们只需要在我们的主模块中创建 applicationInjector，这样我们就可以在我们的匹配器函数中注入(inject)服务；

export let applicationInjector: Injector;

platformBrowserDynamic().bootstrapModule(AppModule).then((componentRef) => {
  applicationInjector = componentRef.injector;
})