Angular2:使路由路径不区分大小写

我有以下路由配置

@RouteConfig([
    {
        path: '/home',
        name: 'Homepage',
        component: HomepageComponent,
        useAsDefault: true
    }
)
export class AppComponent {
}

当浏览器指向

/home

时，此路径有效，但不适用于

/home

或任何其他情况。我如何使路由器路由到组件，而不关心情况

---

谢谢更新

这还没有进入新的路由器

原创

最近引入了正则表达式匹配器。这可能对您的用例有所帮助

看

这是布兰登·罗伯茨写的

@RouteConfig([
  { name : 'Test',
    //path : '/test',
    regex: '^(.+)/(.+)$', 
    serializer: (params) => new GeneratedUrl(`/${params.a}/${params.b}`, {c: params.c}),
    component: Test
//   useAsDefault: true
  }
])

---

更新

这还没有进入新的路由器

原创

最近引入了正则表达式匹配器。这可能对您的用例有所帮助

看

这是布兰登·罗伯茨写的

@RouteConfig([
  { name : 'Test',
    //path : '/test',
    regex: '^(.+)/(.+)$', 
    serializer: (params) => new GeneratedUrl(`/${params.a}/${params.b}`, {c: params.c}),
    component: Test
//   useAsDefault: true
  }
])

---

我针对此问题的解决方法：

/* IMPORTS */

let routeEntries = [
    { path: '/home', component: HomePage }
    /* DEFAULT ROUTE */
    { path: '/', component: HomePage },
    /* NOT FOUND ROUTE */
    { path: '*', component: HomePage }
];

@Component(/* SETUP */)
@Routes(routeEntries)

export App implements OnInit {
    /* STUFF */
    ngOnInit() {
        // subscribe to router changes
        this.router.changes.forEach(() => {
            let routerLink = location.pathname;
            let routerLinkLower = routerLink.toLowerCase();
            // if the route does not exist, check for the lowercase version
            if (!routeEntries.find((route) => { return route.path === routerLink; })) {
                this.router.navigate([routerLinkLower]);
            }
            // if the route is correct, set the active page
            else {
                // do something here if required
            }
        });
    }
}

这适用于RC1路由器，并与路由变化相适应，例如：

'{domain}:{port}/HoMe'
'{domain}:{port}/homE'
'{domain}:{port}/Home'
...

---

我针对此问题的解决方法：

/* IMPORTS */

let routeEntries = [
    { path: '/home', component: HomePage }
    /* DEFAULT ROUTE */
    { path: '/', component: HomePage },
    /* NOT FOUND ROUTE */
    { path: '*', component: HomePage }
];

@Component(/* SETUP */)
@Routes(routeEntries)

export App implements OnInit {
    /* STUFF */
    ngOnInit() {
        // subscribe to router changes
        this.router.changes.forEach(() => {
            let routerLink = location.pathname;
            let routerLinkLower = routerLink.toLowerCase();
            // if the route does not exist, check for the lowercase version
            if (!routeEntries.find((route) => { return route.path === routerLink; })) {
                this.router.navigate([routerLinkLower]);
            }
            // if the route is correct, set the active page
            else {
                // do something here if required
            }
        });
    }
}

这适用于RC1路由器，并与路由变化相适应，例如：

'{domain}:{port}/HoMe'
'{domain}:{port}/homE'
'{domain}:{port}/Home'
...

这就是我所做的

import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        // Optional Step: Do some stuff with the url if needed.

        // If you lower it in the optional step 
        // you don't need to use "toLowerCase" 
        // when you pass it down to the next function
        return super.parse(url.toLowerCase()); 
    }
}

及

这就是我所做的

import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
        // Optional Step: Do some stuff with the url if needed.

        // If you lower it in the optional step 
        // you don't need to use "toLowerCase" 
        // when you pass it down to the next function
        return super.parse(url.toLowerCase()); 
    }
}

及

---

我在app.component.ts中执行了此操作：

export class AppComponent implements OnInit {
  constructor(private _route: Router) { }
  public ngOnInit() {
    this._route.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        let url = (<NavigationStart>event).url;
        if (url !== url.toLowerCase()) {
          this._route.navigateByUrl((<NavigationStart>event).url.toLowerCase());
        }
      }
    });
  }
}

导出类AppComponent实现OnInit{
构造函数（专用_路由：路由器）{}
公共ngOnInit（）{
此._route.events.subscribe（事件=>{
if（导航启动的事件实例）{
让url=（事件）.url；
if（url！==url.toLowerCase（））{
这个._route.navigateByUrl（（event.url.toLowerCase（））；
}
}
});
}
}

这是路由器链路上需要的，以使其在选中时处于活动状态：

<a routerLink="/heroes" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">Heroes</a>

英雄

我在app.component.ts中这样做了：

export class AppComponent implements OnInit {
  constructor(private _route: Router) { }
  public ngOnInit() {
    this._route.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        let url = (<NavigationStart>event).url;
        if (url !== url.toLowerCase()) {
          this._route.navigateByUrl((<NavigationStart>event).url.toLowerCase());
        }
      }
    });
  }
}

导出类AppComponent实现OnInit{
构造函数（专用_路由：路由器）{}
公共ngOnInit（）{
此._route.events.subscribe（事件=>{
if（导航启动的事件实例）{
让url=（事件）.url；
if（url！==url.toLowerCase（））{
这个._route.navigateByUrl（（event.url.toLowerCase（））；
}
}
});
}
}

这是路由器链路上需要的，以使其在选中时处于活动状态：

<a routerLink="/heroes" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">Heroes</a>

英雄

注意：以下内容适用于Angular 4.x

我只使用匹配器函数：

从'@angular/router'导入{RouterModule，urlsecgment，urlsecgmentgroup，Route}；
函数CaseInsensitiveMatcher（url:string）{
url=url.toLowerCase（）；
返回函数(
段：URLSEMENT[]，
segmentGroup:UrlSegmentGroup，
路线：路线
) {
让matchSegments=url.split（'/'）；
如果(
匹配segments.length>segments.length||
（matchSegments.length！==segments.length&&route.pathMatch===='full'）
) {
返回null；
}
let consumered:UrlSegment[]=[]；
设posParams:{[name:string]：URLSEMENT}={}；
对于（让索引=0；索引

与：

@NgModule({
进口：[
...
RouterModule.forRoot([
{matcher:CaseInsensitiveMatcher（'user/：id'），component:ProfileComponent}，
])
],
声明：[
...
],
引导：[
应用组件
]
})

编辑：我刚刚发现，为了使用AoT编译，@NgModule部分看起来更像这样：

导出函数配置文件匹配（）{
返回CaseInsensitiveMatcher（'user/：id'）。apply（这个，参数）；
}
@NGD模块({
进口：[
...
RouterModule.forRoot([
{matcher:profileMatch，component:ProfileComponent}，
])
],
声明：[
...
],
引导：[
应用组件
]
})

注意：以下内容适用于Angular 4.x

我只使用匹配器函数：

从'@angular/router'导入{RouterModule，urlsecgment，urlsecgmentgroup，Route}；
函数CaseInsensitiveMatcher（url:string）{
url=url.toLowerCase（）；
返回函数(
段：URLSEMENT[]，
segmentGroup:UrlSegmentGroup，
路线：路线
) {
让matchSegments=url.split（'/'）；
如果(
匹配segments.length>segments.length||
（matchSegments.length！==segments.length&&route.pathMatch===='full'）
) {
返回null；
}
let consumered:UrlSegment[]=[]；
设posParams:{[name:string]：URLSEMENT}={}；
对于（让索引=0；索引

与：

@NgModule({
进口：[
...
RouterModule.forRoot([
{matcher:CaseInsensitiveMatcher（'user/：id'），component:ProfileComponent}，
])
],
声明：[
...
],
引导：[
应用组件
]
})

编辑：我刚刚发现为了使用AoT