Angular 9 : 允许在路由中带有可选参数值的尾部斜杠

Question

我们对可选参数有以下要求。路由与当前 URL 不匹配。参数值有不同的情况。参数值可以为空。我们可以在下面的路由代码中更改什么？

以下是请求 URL 个案例。

http://localhost:4200/act/sso/app/2040/token/7d2f-4ddd-924f-3fd36572/address/chd/city/chd/state/chd/zip/94524/tax/1000/rep1/ianchi/rep1Email/ianchi@am.com/rep2/Ryan/rep2Email/raphael@am.com

http://localhost:4200/act/sso/app/2040/token/7d2f-4ddd-924f-3fd36572/address/pkl/city/phonix/state/ca/zip/90401/tax/600/rep1//rep1Email//rep2//rep2Email/

http://localhost:4200/act/sso/app/2040/token/7d2f-4ddd-924f-3fd36572/address//city//state//zip//tax//rep1/ianchi/rep1Email/ianchi@am.com/rep2/Ryan/rep2Email/raphael@am.com

我在 app-routing.module.ts 文件中使用以下代码。

{
    path: 'act/sso/app/:app/token/:token/address/:address/city/:city/state/:state/zip/:zip/tax/:tax/rep1/:rep1/rep1Email/:rep1Email/rep2/:rep2/rep2Email/:rep2Email', 
    component: SSOComponent
},

请帮忙解决这个问题？

Answer 1

Parameter value can be blank

如果是这种情况，请使用 Angular 的 Query Parameters 而不是 Router Parameters -- 这样，您需要在 URL 中发送一个对象Angular 将在其中解析。

附上Stackblitz Demo供大家参考

路线

{
    path: 'sso', 
    component: SSOComponent
},

来自另一个组件的模板

<a [routerLink]="sso"
   [queryParams]="ssoParams">SSO</a>

或在其组件内部

@Component({...})
export class OtherComponent {

  ssoParams = {
    app: 1,
    token: 123,
    address: 'random'
  }

  constructor(private router: Router) {}


  // or you can also redirect it inside the component
  redirect(): void {
    this.router.navigate(['sso'], { queryParams: this.ssoParams })
  } 
 
}

重定向后，url 现在将是： /sso?app=1&token=123&address=random

如果它是空的或者如果你在这些对象上传递了一个空值，angular 将解析的 URL 只会变成这样，这仍然有效： /sso?app=&token=&address=

SSO 组件

@Component({...})
export class SSOComponent {

   constructor(private route: ActivatedRoute) {}

   ngOnInit(): void {
     // fetch the query parameters via subscribe
     this.route.queryParams.subscribe(params => console.log(params))

     // or to fetch the query parameters directly via object
     // which this will contain: {app: 1, token: 123, address: 'random'}
     console.log(this.route.snapshot.queryParams);
   }  

}

Angular 9 : 允许在路由中带有可选参数值的尾部斜杠

Angular 9 : Allow trailing slash with optional parameter value in routes

javascript

typescript

angular

angular8

angular9