Demo

Question

如何在特定组件的url末尾添加尾部斜杠？（我的客户需要它，所以不需要添加评论说;不要使用尾部斜杠）。

提前致谢。

Answer 1

您可以通过使用尾部斜杠定义路径，然后确保使用斜杠导航到URL来实现所需的结果。它很可能会导致一些令人头疼的问题，因为路由器会比你预期的更深一些，因为尾部有斜线。

路线

{
    path: 'a/',
    component: AComponent
},
{
    path: 'list/b/',
    component: BComponent,
}

您可以通过在定义的路由后添加空字符串路径来让路由器添加尾部斜杠。如果您自己编写斜杠，请[routerLink]="['/a/']" angular将其删除。

链接

<p><a [routerLink]="['/a', '']">Component A</a></p>

或

<p><a [routerLink]="['../a', '']">Component A</a></p>

以编程方式导航

this.router.navigate(['/a', '']);

Demo

Answer 2

您可以尝试实施自定义UrlSerializer。它可能看起来像这样：

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

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

    serialize(tree: UrlTree): string {
        let url = super.serialize(tree);
        url = url.length > 1 ? url += '/' : url;

        return url;
    }
}

然后在NgModule：

中提供

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

Angular 2 url参数

2 个答案:

Demo