角网格不敏感 [英] Angular url case insensitive

问题描述

我是棱角分明的新人。我有个问题。 localhost：4200 /产品正常运行但本地主机：4200 /产品无法正常工作。



我尝试了什么：

I'm new to angular. I have a question. localhost:4200/product working but localhost:4200/Product not working.

What I have tried:

I try 
<pre>import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
       
        return super.parse(url.toLowerCase()); 
    }
}
.
.
 providers: [
        {
            provide: UrlSerializer,
            useClass: LowerCaseUrlSerializer
        }
    ],

但是把所有字母都缩小了。我想要所有的链接工作。

/产品

/产品

/ PRODUCT

/ pRoDucT

.. ...



app.module.ts

but make all the letters small. I want to all the links to work.
/product
/Product
/PRODUCT
/pRoDucT
.....

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Route } from '@angular/router';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { HomeComponent } from './home/home.component';

const routeConfig: Route[] = [
{
  path: '',
  component: HomeComponent
},
{
  path: 'product',
  component:  ProductComponent
}
];

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    HomeComponent
],
  imports: [
    BrowserModule, FormsModule, RouterModule.forRoot(routeConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Title';
}

我希望你理解。抱歉我的英文不好。

I hope you understand. Sorry for my bad english.

推荐答案

你走在正确的轨道上。使您的Url路由不敏感的步骤如​​下：



1）创建一个源自DefaultUrlSerializer的UrlSerializer（您这样做了）。

You're on the right track. The steps to making your Url routes insensitive are as follows:

1) Create a UrlSerializer that derives from the DefaultUrlSerializer (you did that).

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

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {
       
        return super.parse(url.toLowerCase()); 
    }
}

2）在app.module.ts文件中导入新的UrlSerializer（您的路径会有所不同）：

2) import your new UrlSerializer in your app.module.ts file (your path will be different):

import { LowerCaseUrlSerializer } from './common/providers/others/lowerCaseSerializer/lowerCaseSerializer';

3）向模块提供商注册新的UrlSerializer app.module.ts文件：

3) Register the new UrlSerializer with your module providers in the app.module.ts file:

providers: [
  {
    provide: UrlSerializer,
    useClass: LowerCaseUrlSerializer
  }]

这些都没有。我很惊讶他们没有为DefaultUrlSerializer添加条件，这将允许您指示不区分大小写。互联网上的其他任何地方网址都不敏感。

None of this hard. I'm just surprised that they don't add a conditional to the DefaultUrlSerializer that will allow you indicate case insensitive. Everywhere else on the Internet Urls are insensitive.

您好，



Angular中的路由区分大小写。在routeconfig中，您已将url路径指定为product。

如果您仍然想支持这两种情况，请在路线配置中添加一条新路线，如下所示：



{

路径：'产品'，

组件：ProductComponent

}

Hi there,

The routes in Angular are case sensitive. In the routeconfig, you have specified the url path as "product".
If you still wanna support both the case , add a new route in the route config as follows:

{
path: 'Product',
component: ProductComponent
}

这篇关于角网格不敏感的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！