Member 13582084 Ответов: 2

Угловой url-адрес нечувствителен к регистру


Я новичок в angular. У меня есть вопрос. localhost:4200/продукт работает, но localhost:4200/продукт не работает.

Что я уже пробовал:

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
        }
    ],

но сделайте все буквы маленькими. Я хочу, чтобы все ссылки работали.
/продукт
/Продукт
/ПРОДУКТ
/продукт
.....

приложение.модуль.ТС
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 { }


приложение.компонент.ТС
import { Component } from '@angular/core';

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


Надеюсь, вы понимаете. Извините за мой плохой английский.

2 Ответов

Рейтинг:
2

Darshan Sukumar

Привет,

Маршруты в Angular чувствительны к регистру. В routeconfig вы указали url-адрес как "product".
Если вы все еще хотите поддерживать оба варианта , добавьте новый маршрут в конфигурацию маршрута следующим образом:

{
путь: "продукт",
компонент: ProductComponent
}


Рейтинг:
1

Member 14070740

Ты на правильном пути. Шаги создания вашей стороны бестактно URL-адрес следующим образом:

1) Создайте UrlSerializer, производный от DefaultUrlSerializer (вы это сделали).

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

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

2) импортируйте ваш новый UrlSerializer в файл app.module.ts (ваш путь будет другим):
import { LowerCaseUrlSerializer } from './common/providers/others/lowerCaseSerializer/lowerCaseSerializer';

3) зарегистрируйте новый UrlSerializer у ваших поставщиков модулей в файле app.module.ts:
providers: [
  {
    provide: UrlSerializer,
    useClass: LowerCaseUrlSerializer
  }]

Ничего из этого не сложно. Я просто удивлен, что они не добавляют условие к DefaultUrlSerializer, которое позволит вам указать нечувствительность к регистру. Везде в Интернете URL-адреса нечувствительны.