Блог

Главная - Вопросы по программированию - Угловая навигация по маршрутизации между родительским и дочерним

Угловая навигация по маршрутизации между родительским и дочерним

#javascript #angular #typescript #routes #angular8

#javascript #угловая #typescript #маршруты #angular8

Вопрос:

У меня есть 2 компонента с родительскими и дочерними отношениями. В родительском компоненте у меня есть изображения, которые по щелчку должны переходить к дочернему компоненту. Ниже приведен мой код, URL-адрес в браузере меняется, но страница не перемещается.

Маршрутизация

 const routes: Routes = [
  {
    path: 'parent', component: ParentComponent, children: [
      { path: 'child', component: ChildComponent}
    ]
  },
  { path: '**', component: LoginComponent }
];

HTML

 <section>
    <img src="imagePath" alt="" (click)="gotoProfile()">
</section>
<div>
<router-outlet></router-outlet>
</div>

TS

 gotoProfile() {
    this.route.navigate(['/parent/child']);
}

Навигация работает только тогда, когда я использую логические переменные для отображения скрытия при нажатии кнопки (что не является хорошей практикой), как показано ниже. Использование логических значений после навигации вызывает некоторую проблему, при нажатии кнопки «Назад» в дочернем компоненте родительский компонент не загружается.

TS

  gotoProfile() {
      this.hideParentDiv = true;
      this.route.navigate(['/parent/child']);
    }

HTML

  <section *ngIf="hideParentDiv ">
        <img src="imagePath" alt="" (click)="gotoProfile()">
    </section>
    <div *ngIf="!hideParentDiv ">
    <router-outlet></router-outlet>
    </div>

Кто-нибудь может мне помочь в этом, любая помощь очень ценится.

Спасибо.

Комментарии:

1. Во-первых, что вы имеете в виду по поводу «скрыть отображение» на кнопке. Вы скрываете кнопку при ее нажатии или изображения. Также, пожалуйста, укажите код вашего модуля маршрутизатора и некоторый код дочернего компонента

2. @JoCarrasco отображает и скрывает родительский и дочерний компоненты, при нажатии на изображение, как оно должно, переходит к дочернему компоненту (поскольку у меня проблемы с навигацией, я скрываю родительский html здесь)

3. @JoCarrasco Я добавил код

Ответ №1:

Выход маршрутизатора — это тег, используемый для визуализации компонентов. Вы не должны это скрывать.Это все равно, что блокировать дверь, прежде чем пытаться войти. Если вы хотите «скрыть» элементы, вам следует переместить маршрутизатор-розетку вверх по иерархии навигации. Это означает, что вы должны создать в маршрутизаторе «Страницу изображений для щелчка» и «Страницу подробного изображения». Вот так:

 const routes: Routes = [
  {
    path: 'home', component: ExampleComponent, children: [
      { path: 'images-page', component: ImagesComponent },
      { path: 'image-detail-page', component: ImageDetailComponent}
    ]
  },
  { path: '**', component: LoginComponent }
];