Angular 2 不同的组件具有相同的路线 [英] Angular 2 different components with same route

问题描述

我有一个应用程序，需要将经过身份验证的用户和来宾用户组件分开.但我需要，这两个组件都将通过/"路由加载.我写了

<代码>{路径:'桌面'，loadChildren: 'app/member/member.module#MemberModule',canActivate: [LoggedInGuard],},{小路: ''，loadChildren: 'app/guest/guest.module#GuestModule',canActivate: [GuestGuard],},

它有效.但是如何制作，这两个组件都通过相同的网址加载?我曾尝试为成员的模块路由编写 path: '' ，但未执行第二个路由规则.这是守卫代码:

LoggedInGuard:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {if(this.sessionService.isLoggedIn()) {返回真；} 别的 {返回假；}}

GuestGuard:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {if(!this.sessionService.isLoggedIn()) {返回真；} 别的 {返回假；}}

这是一个plunker:http://embed.plnkr.co/VaiibEVGE79QU8toWSg6/>

我该怎么做才能正确?谢谢

解决方案

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

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

<代码>{路径:'相同路径'，匹配器:firstMatcher，loadChildren: '../first/first.module#FirstModule'},{路径:'相同路径'，匹配器:secondMatcher，loadChildren: '../second/second.module#SecondModule'}

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

import { applicationInjector } from '../../main';导出函数 firstMatcher (url: UrlSegment[]) {const auth = applicationInjector.get(AuthService);返回 auth.isUserType('admin') ?({consumed: [url[0]]}) : null;}

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

export let applicationInjector: Injector;platformBrowserDynamic().bootstrapModule(AppModule).then((componentRef) => {applicationInjector = componentRef.injector;})

I have an application, which need to separate authenticated and guest users components. But I need, that both components will be loaded by '/' route. I wrote

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

And it works. But how to make, that both component load by same url? I had tried to write path: '' for Member's module route, but the second router rule is not performed. Here are guards code:

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

Here is a plunker: http://embed.plnkr.co/VaiibEVGE79QU8toWSg6/

How should I do it properly? Thank you

解决方案

So i was finally able to do this. The thing is Angular uses first match policy, so we need to match routes in a guard-type way, to be sure that right route with right module will be matched.

First thing we need to add custom matchers for our routes which will only match them on conditions that we want (user type for example).

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

And matchers code is something like this: In here i injected AuthService service from AppModule, and checked users type with it. So routes can be matched according to users type.

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

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

And now only thing we need is to create applicationInjector in our main module, so we could inject service in our matcher-function;

export let applicationInjector: Injector;

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

这篇关于Angular 2 不同的组件具有相同的路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！