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序列化而不是默认的序列化。新的序列化程序会将破折号-转换为斜杠/，以便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序列化程序，使其更加具体，但是您应该从此示例中了解如何工作。

在角度6中，如何用'-'而不是'/'制作url

1 个答案: