角度 8 中的嵌套可选路线答案

【问题标题】：Nexted optional route in angular 8角度 8 中的嵌套可选路线
【发布时间】：2019-10-26 13:25:51
【问题描述】：

有没有办法在 Angular 8 中进行下一个可选路由。

{
    path: 'mfa',//ConstantValues.route_list[0].route,
    data: { 'navBar': false },
    children: [
      { path: '', redirectTo: 'reset', pathMatch: 'full' },
      { path: 'mfa-code', component: MfaVerificationCodeComponent },
      { path: ':app', component: MfaMobileAppsComponent },
      { path: ':app/:provider', component: AppProviderComponent }
    ]
  }

我主要关注这两行

{ path: ':app', component: MfaMobileAppsComponent },
{ path: ':app/:provider', component: AppProviderComponent }

我想要达到的网址

https://localhost:44307/mfa/google/apple --> google and apple is optional
https://localhost:44307/mfa/okta/google  --> okta and google is optional

我不想使用查询参数，因为我还有一些其他条件。以及如何获取TS文件中url的值。

【问题讨论】：

那么您现在遇到了什么问题或问题？
AppProviderComponent 未加载继续加载 MfaMobileAppsComponent

标签： javascript angular typescript angular-ui-router angular8

【解决方案1】：

要导航，我需要使用它，这很有效

 protected submit(model: MfaAppViewModel) {
    this.router.navigate(['{providerName}'], { relativeTo: this.route });
  }

另一个例子

{path: 'studentList', component : StudentListComponent},  
{path: 'studentDetails/:id/:name/:marks', component : StudentDetailsComponent}


<a routerLink="/studentDetails/{{stud.id}}/{{stud.name}}/{{stud.marks}}"> Id : {{stud.id}}, Name : {{stud.name}} </a>

读取TS文件中的值

 this.providerName = this.route.snapshot.params['provider'];

【讨论】：