как хранить параметры маршрута во вложенных маршрутах в angular 4?

Причина использования вложенного маршрута для меня заключается в динамической обработке значка и кнопки «Назад» для каждой страницы. У меня есть абстрактный маршрут, потому что, когда я нажимаю кнопку «Назад», параметры маршрута исчезают, и я помещаю абстрактный путь, чтобы сохранить идентификатор и параметр типа анкеты в url.my abstract путь Анкета.

      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, я перехожу к

локальный хост: 4200/ModifyMetaContent/...

и когда я нажимаю кнопку «Назад», id и questionnairetype исчезают из URL-адреса. Когда я нажимаю ModifyMetaContent, я ожидал перейти к:

localhost: 4200/Опросник/b8b55b42-f39f-4359-93d0-0260ddf3827f/MetaContentList/ModifyMetaContent/...

и когда я нажимаю кнопку «Назад», я ожидал перейти к

.../Questionaire/b8b55b42-f39f-4359-93d0-0260ddf3827f/MetaContentList/, но URL установлен на localhost:4200/MetaContentList

и произошла эта ошибка:

Не удается сопоставить ни одного маршрута. Сегмент URL: «MetaContentList»

Я обрабатываю этот случай с помощью вложенных состояний angularjs ui-router. Есть ли какое-либо решение этой проблемы в маршрутизаторе angular2+?


person Aref Zamani    schedule 07.01.2018    source источник


Ответы (2)


{ 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 }]}}]}}]);

      }

Привет, я тоже использую розетки, но если вы думаете, что они далеко, вы могли бы заставить работать свои? Не уверен, что это именно то, что вы хотите, но, возможно, это поможет.

person oudekaas    schedule 07.01.2018
comment
Большое спасибо за ваш ответ. но это не работает для меня. я решаю свою проблему, но я хочу улучшить ее до передового опыта. - person Aref Zamani; 08.01.2018
comment
youtube.com/watch?v=yPKSpuso6K0 использование глубины в app.routnig позволяет для перемещения состояний и создания иерархии. Может ли это помочь вам? Не уверен, что это также сработает с вашей конкретной проблемой с параметрами. Я хотел бы Хар, как я хочу сделать что-то подобное! - person oudekaas; 08.01.2018

я решаю эту проблему, изменив структуру маршрута и добавив функцию для ссылки на предыдущее состояние в компоненте приложения:

мой роутер:

    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 возможно:

  1. предыдущий URL нормальный
  2. предыдущий URL-адрес является вложенным URL-адресом для реализации выше состояния. Я помещаю предыдущее состояние в массив, если мы находимся в состоянии 2. array.length больше 1. Для встраивания параметров маршрута я создаю метод в компоненте приложения:

метод получения последнего ребенка:

 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;
  }

}

и получить данные:

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);

   });

это работа для меня, но я хочу максимально улучшить ее.

person Aref Zamani    schedule 08.01.2018