如何在angular 4中的嵌套管线中存储管线参数？

我使用嵌套路由的原因是动态处理每个页面的图标和后退按钮。我有抽象路由，因为当我单击后退按钮时，路由参数消失，我在url中放置了一个抽象路径以保留id和问卷类型参数。我的抽象路径是问询

      const routes: Routes = [
          {
             path: '',
              component: LayoutComponent, 
            children:[
              { path: 'Home', component: HomeComponent,data:{icon:'fa-home'} },
              { path: 'QuestionaireList', component: QuestionaireListComponent,data:{icon:'fa-list-ul',previousState:'/Home'} },
              { path: 'ModifyMetaContent/:metaContentId/:title', component: ModifyMetaContentComponent,data:{icon:'fa-database',previousState:'/MetaContentList'}}

              { 
                path: 'Questionaire/:id',
                children:[
                { path: 'MetaContentList', component: MetaContentListComponent,data:{icon:'fa-database',previousState:'/QuestionaireList'}}

      ]},




              { 
                path: 'Questionaire/:questionnaireType',
              children:
              [     
                 { path: 'AddQuestionnaire', component: CreateQuestionnaireComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'}},      
              ]},
              { 
              path: 'Questionaire/:questionnaireType/:id',
              children:[ 
              { 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'}   },

            ]} ,
            ]},
      ];

MetaContentList.Component.html

   <a class="ui labeled positive icon small button" [routerLink]="['/ModifyMetaContent','',questionnaireTitle]">
  <i class="plus icon"></i>
 new metaContent
</a>

新元内容

我将以前的url存储在

snapshot.data.previousState

中，但当我单击

ModifyMetaContent

时，我会转到

localhost:4200/ModifyMetaContent/

当我单击后退按钮时，

id

和

questionnairetype

从url中消失。当我要单击修改元内容时，我希望转到：

本地主机：4200/问卷调查/b8b55b42-f39f-4359-93d0-0260ddf3827f/元内容列表/修改元内容/

当我点击“返回”按钮时，我希望返回

…/调查问卷/b8b55b42-f39f-4359-93d0-0260ddf3827f/元内容列表/ 但url设置为 localhost:4200/MetaContentList

发生了以下错误：

无法匹配任何路由。URL段：“元内容列表”

我通过angularjs ui-router的嵌套状态来处理这个问题。angular2+路由器有解决这个问题的方法吗

{ path: '', redirectTo: 'main', pathMatch: 'full' 
},
{ path: 'header', component: HeaderComponent},
{ path: 'login', component: LoginComponent},
{ path: 'logout', component: LogoutComponent},
{ path: 'register', component: RegisterComponent},
 { path: 'profile', children: [

    { path: ':id', component: ProfileComponent,children: [
    { path: 'profileform/:id',  component: ProfileformComponent,outlet: 'formOutlet', pathMatch: 'full' }]}]},


 { path: 'main', component: MainComponent, children: [
    { path: 'stone/:id',  component: StoneComponent,outlet: 'aux', children: [
    { path: 'steemblog', component: BlogComponent,outlet: 'blogoutlet'},
    {path: 'extlogin', component: ExternalLoginComponent, outlet:'blogoutlet'
    }]}]},

{路径：'**'，组件：NotfoundComponent}

       this.router.navigate(['/main',{outlets: { 'aux' : ['stone',this.state, {outlets: { 'blogoutlet' : ['steemblog',
        { 'access_token': this.accessToken, 'expires_in': this.expiresIn, 
      'userName':this.userName }]}}]}}]);

      }

---

嗨，我也在使用插座，但如果你想把它们拿走，你也许可以让你的工作？不确定这是否正是你想要的，但也许它有帮助

我通过更改路由结构并在appcomponent中为previousstate链接添加一个函数来解决此问题：

我的路由器：

    const routes: Routes = [
      {
         path: '',
          component: LayoutComponent, 
            children:[
          { path: 'Home', component: HomeComponent,data:{icon:'fa-home',previousState:[]} },
          { path: 'QuestionaireList', component: QuestionaireListComponent,data:{icon:'fa-list-ul',previousState:['/Home']} },

          { path: 'Questionaire/:id',children:[
            { path: 'MetaContentList', component: MetaContentListComponent,data:{icon:'fa-database',previousState:['/QuestionaireList']}},
            { path: 'ModifyMetaContent/:metaContentId/:title', component: ModifyMetaContentComponent,data:{icon:'fa-database',previousState:['Questionaire','MetaContentList']}}
            ]},
          { path: 'Questionaire/:questionnaireType',
            children:[{ path: 'AddQuestionnaire', component: CreateQuestionnaireComponent,data:{icon:'fa-plus',previousState:['/QuestionaireList']}}]},
          {path: 'Questionaire/:questionnaireType/:id',
            children:[ 
          { 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-upload',previousState:['/QuestionaireList']}   },
        ]} ,
        ]},      
  ];

在我的路由器2状态下，可能：

以前的url是正常的

上一个url是嵌套url 对于上述状态的实现，如果我们处于状态2

array，我将previousstate放入数组中。长度大于1。为了嵌入路由参数，我在appcomponent中创建了一个方法：

获取lastchild的方法：

 getSnapshot(route: ActivatedRoute){
                let lastChild = route;
                while (lastChild.firstChild) {
                lastChild = lastChild.firstChild;
                }
                return lastChild;
                } 

获取以前状态的方法：

getPreviousUrl(a):string{
  let previousState:string;
  const previousStateLength=a.snapshot.data.previousState ? a.snapshot.data.previousState.length :null;
  if(previousStateLength!==null){
   if(previousStateLength<=1 )
   {previousState=a.snapshot.data.previousState[0];}
   else{
     previousState='/';
     let parentParams=[''];
     let j:number=0;
     let b=a;
     while(b.parent){
       b.parent.params.subscribe((params)=>{
         Object.keys(params).map(key=>parentParams[j]+=params[key]+'/');
         for(let i=0;i<previousStateLength-1;i++){
           if(parentParams[j]!==undefined)
           previousState+=a.snapshot.data.previousState[i]+'/'+parentParams[j];
         }
        })
       b=b.parent;
     j++;
     }
     previousState+=a.snapshot.data.previousState[previousStateLength-1];

   }
   return previousState;
  }

}

---

这对我来说很有用，但我想最大限度地改进它。

非常感谢您的回答。但这对我不起作用。我解决了我的问题，但我想将其改进为最佳实践。在app.routnig中使用深度可以移动状态并创建层次结构。这个能帮你吗？但不确定这是否也适用于您的特定参数问题。我很想去哈，因为我想做类似的事情！

constructor(router:Router,route:ActivatedRoute) {

     router.events
     .filter(event => event instanceof NavigationEnd)

     .subscribe(e => {

       const lastChild=this.getSnapshot(route);
       this.routerIcon = lastChild.snapshot.data.icon;
       this.previousState=this.getPreviousUrl(lastChild);

   });