通过在路径前添加 '%2f' 字符来解决 angular4 路由问题

Question

我使用嵌套路由的原因是动态处理每个 page.i 具有抽象路由的图标和后退按钮，因为当我单击后退按钮时，路由参数消失并且我放置了一个抽象路径以保留 id 和 url.my 抽象路径中的 questionnaire 类型参数是 Questionaire

 { path: 'Home', component: HomeComponent,data:{icon:'fa-home'} },
 { path: 'QuestionaireList', component: QuestionaireListComponent,data:{icon:'fa-list-ul',previousState:'/Home'} },
 { 
      path: 'Questionaire/:questionnaireType/:id',
      children:[ 
      { path: 'AddQuestionnaire', component: CreateQuestionnaireComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'} },
      { path: 'UpdateQuestionnaire', component: EditComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
      { path: 'QuestionList', component: QuestionListComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
      { path: 'ImportQuestion',    component: ImportQuestionComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'}  },
      { path: 'MetaContentList', component: MetaContentListComponent,data:{icon:'fa-database',previousState:'/QuestionaireList'} },
      { path: 'ModifyMetaContent/:metaContentId/:title', component: ModifyMetaContentComponent,data:{icon:'fa-database',previousState:'/MetaContentList'}},
    ]}

同样在 questionnaire.list.html i link 通过路由器 link 到每条路径下面是我的 link :

[routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']"

这是我的 link :

 <a  class="primary small ui icon button" [routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']" >
                <i class="edit   icon"></i>
              </a>

我预计当我点击 link 时我会路由到这个地址：

.../Questionaire/1/b8b55b42-f39f-4359-93d0-0260ddf3827f/UpdateQuestionnaire

但是出现了这个错误

Cannot match any routes. URL Segment: 'Questionaire/1/b8b55b42-f39f-4359-93d0-0260ddf3827f/%2FUpdateQuestionnaire'

实际上路由器link 在更新问卷前添加 %2f。为什么会这样？我的代码有什么问题

Answer 1

您是否试过像这样删除路由器 link 中的斜杠：

[routerLink]=['Questionaire', item.questionnaireType, item.id, 'UpdateQuestionnaire']?

路由器link中的斜线似乎有问题，如post

中所述

我会 post 作为评论，但由于我没有足够的声誉，我会 post 作为答案，对此感到抱歉。

我希望这能帮您解决问题。

亲切的问候克里斯

通过在路径前添加 '%2f' 字符来解决 angular4 路由问题

angular4 route issue by adding '%2f' character before path

angular

angular2-routing

angular-router

angular4-router