来自数据库的 Angular 5 通配符路由答案

【问题标题】：Angular 5 Wildcard Routes from Database来自数据库的 Angular 5 通配符路由
【发布时间】：2018-06-28 11:36:51
【问题描述】：

我有一个来自数据库的类别列表，如下所示：

[
  "Travel",
  "Apparel & Clothing",
  "Footwear",
  "Kids & Children",
  "Grocery",
  "Food & Beverage",
  "Innerwear & Swimwear",
  "Hotels",
  "Bus Tickets",
  "Mobiles & Tablets",
  "Personalized Gifts",
  "Jewellery & Coins",
  "Car & Taxi Rental",
  "Pharmacy",
  "Watches",
  "Bags & Wallets",
  "Gifts & Flowers",
  "Accessories",
  "Games",
  "Health",
  "Beauty & Personal Care",
  "Electronics"
]

我正在尝试从此类别列表创建路线，我不确定如何处理列表中某些类别的路线。

例如：

Apparel & Clothing
Bus Tickets

angular 5 路由系统中的“&”符号和空格如何处理？

【问题讨论】：

JavaScript 有一个 unescape() 方法。那应该保留符号/空格等，
@rrd unescape() 方法已被弃用。我想按原样使用它。有可能吗？
如果你假设你只会得到空格和＆符号，你可以更手动地做： string.replace('&', '&quot').replace(' ', ' ' )

标签： angular routing angular2-routing url-routing angular5

【解决方案1】：

我找到了一个类似于我们在 Angular 5 中拥有 Pipes 概念的助手的解决方案。

它帮助了我：

https://github.com/angular/angular-cli

https://github.com/angular/angular-cli/wiki/generate-pipe

我的自定义管道删除空格和特殊字符：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'removeSpaceCharacters'
})
export class RemoveSpaceCharactersPipe implements PipeTransform {
  transform(value: string): string {
    let newValue = value.replace(/[^A-Z0-9]/ig, "");
    return `${newValue}`;
  }
}

【讨论】：