在 Angular 6 中，如何使 url 带有“-”但不带有“/”

Question

我是 Angular 和 StackOverflow 的初学者。

-我想使用带有字符作为参数分隔符的URL 。

例如; URL 可以是参数所在的http://localhost:4200/nf-clarkzkent位置：clarkzkent:username

const appRoutes: Routes = [
    { path: ':username', component: NewsfeedComponent, data: [{ username: true }] }
];

现在的问题是我必须创建另一个 URL，比如参数在http://localhost:4200/cmpgm-clarkzkent哪里。clarkzkent

const appRoutes: Routes = [      
   { path: ':username', component: NewsfeedComponent, data: [{ username: true }] },
   { path: '??', component: ChannelComponent, data: [{ ?? }] },
];

Answer 1

我是 Angular 和 StackOverflow 的初学者。

欢迎来到 Angular 和 StackOverflow。你问的是一个我认为是高级水平的问题，即使是我也很难给出答案，因为通常这需要一些尝试和错误才能发挥作用。

您需要实现一个 URL 序列化器并告诉 Angular 使用您的自定义 URL 序列化而不是默认的 URL 序列化。新的序列化器会将破折号转换-为斜杠，/以便 Angular 认为两者是相同的。

https://angular.io/api/router/UrlSerializer

我无法测试以下代码，但它可能看起来像这样。

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

@Injectable()
class CustomUrlSerializer extends DefaultUrlSerializer {
    parse(url: string) : UrlTree {
        return super.parse(url.replace(/-/g,'\\'));
    }
}

上面的代码非常简单，但它也会重写查询参数中的破折号（但目前这已经足够好了）。

有了自定义 URL 序列化器后，您必须告诉 Angular 使用它而不是默认的序列化器。

@NgModule({
    providers: [
       {provide: UrlSerializer, useClass: CustomUrlSerializer}
    ]
    // ....
})
export class AppModule {}

现在会发生的情况是，Angular 会认为 URL 中的所有破折号与斜杠相同，您可以像平常一样配置路由器。除非你在路径中使用/而不是。-

const appRoutes: Routes = [      
   { path: 'nf/:username', component: NewsfeedComponent, data: [{ username: true }] },
   { path: 'cmpgm/:username', component: ChannelComponent, data: [{ ?? }] },
];

上面的代码将匹配路由，并允许您使用破折号单独定义参数，但唯一的副作用是，当使用破折号而不是斜杠时，所有路由都有效。因此，您将希望改进自定义 URL 序列化程序，使其更加具体，但您应该从此示例中了解其工作原理。