Angular параметр маршрутизатора заменяет кодированные пробелы тире

Question

В моем приложении определена маршрутизация, одна из которых 'recipe-details/:name'

const routes: Routes = [
...
  { path: 'recipe-details/:name', component: RecipeDetailsComponent },
...
];

, где имя уникально и может содержать пробелы, например name: "here is recipe name". Маршрутизатор кодирует пробелы, и из-за этого мой URL выглядит так http://example.com/recipe-details/here%20is%20recipe%20name Я хочу заменить пробелы тире, чтобы они выглядели так http://example.com/recipe-details/here-is-recipe-name. Но я не хочу менять значение самого имени параметра.

Я попытался перехватить UrlSerializer. И это работает, когда я перемещаюсь в приложении. Но он не работает при вводе URL-адреса напрямую, потому что параметр name имеет значение с тире here-is-recipe-name и не может быть прочитан из базы данных (потому что он не существует в такой форме).

@Injectable()
export class CustomUrlSerializerInterceptor implements UrlSerializer {
    private defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

    parse(url: string): UrlTree {
        return this.defaultUrlSerializer.parse(url);
    }    
    serialize(tree: UrlTree): string {
        return this.defaultUrlSerializer.serialize(tree).replace(/%20/g, '-');
    }
}

Есть ли хорошая идея? Или, может быть, есть другой способ достичь моей цели?

Answer 1

Решением для этого является то, что вы должны явно добавлять тире при переходе к маршруту и ​​снова удалять тире и добавлять пробелы при загрузке маршрута.

В вашем случае перед переходом к маршруту выполните следующие действия:

navigateToRecipeDetails(name : String){
   //Add dashes in place of spaces
   let nameInRoute: String = name.split(' ').join('-');
   this.router.navigate(['/recipe-details/'+ nameInRoute]);
}

Теперь в компоненте сведений о рецепте выполните следующие действия в компоненте init:

ngOnInit()
    {
        const routeParams = this.activatedRoute.snapshot.params;
        //remove the dashes and add spaces
        let name = routeParams.name.split('-').join(' ');
        //this is your original recipe name which you had passed from previous page
    }