Вопрос:

Маршрутизация с Angular2 (404 страницы отсутствуют)

angular

649 просмотра

2 ответа

311 Репутация автора

У меня есть приложение в Angular2, где мне нужно передать два параметра от одного компонента к другому через маршрутизацию. Это основные маршруты приложений:

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'correlation', loadChildren: './+mep-correlation#MepCorrelationModule'},
  { path: '**',    component: NoContentComponent },
];

Внутри модуля используется другой компонент под названием ShowcaseComponent, где пользователь делает несколько выборов, а затем нажимает кнопку подтверждения. Эта кнопка открывает компонент Dialog со сводкой выбора пользователя, где он должен подтвердить еще раз, если он уверен в своем выборе.

Предполагается, что кнопка подтверждения в этом диалоговом окне направляется на тот же URL-адрес, но с двумя параметрами:

public confirmShowcase() {
  this.dialogRef.close();
  this.router.navigate(
    ['configuration', {
      concept : this.selectedConcept.id ,
      level : this.selectedLevel
     }
    ]
  );
}

И вот маршруты для модуля корреляции:

export const routes = [
  { path: '', component: MepCorrelationComponent , children: [
    { path: 'configuration', children: [
      { path: 'concept:id', children: [
        { path: 'level:id' , component: MepCorrelationConfigurationComponent }
      ]}
    ]}
  ]}
];

MepCorrelationConfigurationComponent является компонентом модуля.

Затем в этом компоненте я хочу прочитать параметры маршрута, чтобы я мог использовать их при вызове службы:

public ngOnInit() {
  this.route.params
    .switchMap((params: Params) => {
      return this.correlationService
        .loadCorrelationData(params['concept'], params['level']);
    }).subscribe(
      (correlationData) => {
        this._store.dispatch(
          new LoadCorrelationDataAction(correlationData)
        );
      }
    );
}

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что всякий раз, когда я нажимаю кнопку подтверждения в диалоговом компоненте, и страница пытается перенаправить, http://localhost:3000/#/configuration;concept=14;level=3например, на страницу 404 отсутствует ошибка. Кто-нибудь знает, что я могу делать не так?

РЕДАКТИРОВАТЬ

Изменены маршруты модуля на:

export const routes = [
  { path: '', children: [
    { path: '', component: MepCorrelationComponent },
      { path: 'configuracion', children: [
        { path: '/:concepto/:nivel', component: MepCorrelationConfigurationComponent }
      ]}
    ]}
 ];

И пробовал метод навигации разными способами безрезультатно:

Маршруты до 404:

this.router.navigate([
  'correlation/configuration',
  {
    concept: this.selectedConcept.id,
    level: this.selectedLevel
  }
]);

Маршруты к пустой странице:

this.router.navigate([
  'correlation/configuration',
  this.selectedConcept.id,
  this.selectedLevel
]);
Автор: Tuco Источник Размещён: 09.03.2017 08:46

Ответы (2)


0 плюса

17225 Репутация автора

попробуй это :

HTTP: // локальный: 3000 / # / Конфигурация / Концепция / 14 / уровень / 3

 export const routes = [
      { path: '', component: MepCorrelationComponent , children: [
        { path: 'configuration', children: [
          { path: 'concept/:c_id', children: [
            { path: 'level/:id' , component: MepCorrelationConfigurationComponent }
          ]}
        ]}
      ]}
    ];

используйте другое имя id, чтобы вы могли легко получить к ним доступ в ActivatedRouteсервисе.

примечание: правильный способ создания глубокой ссылки выглядит следующим образом: https://web.facebook.com/groups/groupID/permalink/postID/

Автор: Bougarfaoui El houcine Размещён: 09.03.2017 09:12

0 плюса

311 Репутация автора

Решение

Я наконец смог решить эту проблему, я думаю, проблема заключалась в том, что я смешивал необязательные и требуемые параметры маршрутизатора.

Маршруты модуля закончились так:

export const routes = [
  { path: '', children: [
    { path: '', component: MepCorrelationComponent },
    { path: 'configuracion/:conceptId/:levelId', component: MepCorrelationConfigurationComponent }
  ]},
];

И вызвал метод навигации так:

this.router.navigate([
 `correlacion/configuracion/${this.selectedConcept.id}/${this.selectedLevel}`
]);

Это теперь загружает мой компонент конфигурации.

Автор: Tuco Размещён: 09.03.2017 09:41
Вопросы из категории :
32x32