通过在路径前添加“%2f"字符来解决 angular4 路由问题 [英] angular4 route issue by adding '%2f' character before path

问题描述

对我来说使用嵌套路由的原因是动态处理每个页面的图标和后退按钮.我有抽象路由，因为当我点击后退按钮时，路由参数消失了，我放了一个抽象路径来保留 id 和 questionnaire 类型参数在 url.my 抽象路径是 Questionaire

reason of using nested route for me is handling dynamically icon and back button for every page.i have abstract route because when i click to back button route params disappear and i put an abstract path to keep id and questionnaire type parameter in url.my abstract path is 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 中我通过 routerlink 链接到每条路径下面是我的链接之一:

Also in questionnaire.list.html i link to every path by routerlink bellow is one my link :

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

这是我的链接:

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

我希望当我点击链接时我会路由到这个地址:

I expected when i click on link i route to this address:

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

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

但是发生了这个错误

无法匹配任何路由.网址段:'问卷/1/b8b55b42-f39f-4359-93d0-0260ddf3827f/%2FUpdateQuestionnaire'

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

实际上routerlink 在UpdateQuestionnaire 之前添加%2f.为什么会这样?我的代码有什么问题

actually routerlink add %2f before UpdateQuestionnaire. why is this happening? what's wrong in my code

推荐答案

您是否尝试过像这样删除路由器链接中的斜杠:

Have you tried removing the slashes in your Router link like so:

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

路由器链接中的斜线似乎存在问题，如本帖子中所述

There seems to be a problem with slashes in routerlink as described in this post

我会将此作为评论发布，但由于我没有足够的声誉，因此我将其发布为答案，对此感到抱歉.

I would post this as a comment, but since I don't have enough reputation I will post this as an answer, sorry about that.

我希望这可以为您解决问题.

I hope this clears stuff up for you.

亲切的问候克里斯

这篇关于通过在路径前添加“%2f"字符来解决 angular4 路由问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！