Angular и Bootstrap — Маршруты

Я создал меню, хлебные крошки, компоненты и их дочерние элементы. Проблема в том, что я прекрасно вижу первого дочернего элемента, но когда я открываю дочерний элемент этого дочернего элемента (так сказать, внуков), компонент открывается под его родителем. Моя цель — удалить родительское представление и показать только дочернее. Я оставляю код для лучшего понимания. Отец — casilleros.comComponent, а его ребенок — historial.comComponent.

<!-- dashboard.component.html -->
<div class = "dashboard-container">
    <app-menu></app-menu>
    <div class = "content-area">
        <app-navbar></app-navbar>
        <app-breadcrumb></app-breadcrumb>
        <div class = "dashboard-content">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>
// app-routing.module.ts
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'navbar', component: NavbarComponent },
  {
    path: 'dashboard', component: DashboardComponent, data: { breadcrumb: 'Dashboard' },
    children: [
      { path: 'permisos', component: PermisosComponent, data: { breadcrumb: 'Permisos' }},
      { path: 'operarios', component: OperariosComponent, data: { breadcrumb: 'Operarios' }},
      { path: 'maquinas', component: MaquinasComponent, data: { breadcrumb: 'Máquinas' }},
      { path: 'materiales', component: MaterialesComponent, data: { breadcrumb: 'Materiales' }},
      { 
        path: 'casilleros', component: CasillerosComponent, data: { breadcrumb: 'Casilleros' },
        children: [
          { path: 'historial', component: HistorialComponent, data: { breadcrumb: 'Historial' }, outlet: 'casilleros' }
        ]
      },
--
--
--

    <!-- casilleros.component.html -->
    <div class = "container mt-4">
        <div class = "d-flex justify-content-between mb-3">
            <input type = "text" class = "form-control w-50" placeholder = "Buscar">
        </div>
        <table class = "table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Referencia</th>
                    <th>Ubicación</th>
                    <th>Activo</th>
                    <th>Ocupado</th>
                    <th>Acción</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let item of items; let i = index;">
                    <td>{{i}}</td>
                    <td>{{ item.referencia }}</td>
                    <td>{{ item.ubicacion }}</td>
                    <td>
                        <div class = "form-check form-switch">
                            <input class = "form-check-input" type = "checkbox" id = "activo{{ item.referencia }}" checked>
                        </div>
                    </td>
                    <td>
                        <div class = "form-check form-switch">
                            <input class = "form-check-input" type = "checkbox" id = "ocupado{{ item.referencia }}" checked>
                        </div>
                    </td>
                    <td>
                        <button (click) = "goToHistorial(item)" class = "btn btn-sm"><i class = "bi bi-search"></i></button>
                        <button class = "btn btn-sm"><i class = "bi bi-pencil"></i></button>
                        <button class = "btn btn-sm"><i class = "bi bi-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>
        <router-outlet name = "casilleros"></router-outlet>
    </div>

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-casilleros',
  templateUrl: './casilleros.component.html',
  styleUrls: ['./casilleros.component.css']
})
export class CasillerosComponent {

  constructor(private router: Router) {}

  items = [
    { referencia: 101, ubicacion: 'Vinilo' },
    { referencia: 102, ubicacion: 'Vinilo' },
    { referencia: 103, ubicacion: 'Vinilo' },
    { referencia: 104, ubicacion: 'Vinilo' },
    { referencia: 105, ubicacion: 'Vinilo' },
    { referencia: 106, ubicacion: 'Vinilo' },
    { referencia: 107, ubicacion: 'Vinilo' },
    { referencia: 108, ubicacion: 'Vinilo' },
    { referencia: 109, ubicacion: 'Vinilo' },
    { referencia: 110, ubicacion: 'Vinilo' }
  ];

  goToHistorial(item: any) {
     this.router.navigate([{ outlets: { casilleros: ['historial'] } }]);
  }
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
59
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если я вас правильно понимаю. Ваша проблема заключается в структуре вашей маршрутизации и в том, как вы управляете отображением дочерних компонентов в вашем угловом приложении.

Сделайте следующий шаг.

  1. Удалите указанный маршрутизатор из casilleros.comComponent.html.
  2. Адаптируйте навигацию в вашем casilleros.comComponent.ts.
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-casilleros',
  templateUrl: './casilleros.component.html',
  styleUrls: ['./casilleros.component.css']
})
export class CasillerosComponent {

  constructor(private router: Router) {}

  goToHistorial(item: any) {
     this.router.navigate(['dashboard/casilleros/historial']);
  }
}

Обновлять

Я создал stackblitz, чтобы лучше понять вашу проблему.

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

Чтобы отображать HistorialComponent при переходе из CasillerosComponent, реструктурируйте свои маршруты так, чтобы HistorialComponent заменял родительское представление (CasillerosComponent), а не выполнял рендеринг внутри него.

Сделайте следующий шаг.

  1. Адаптируйте маршруты: переместите HistorialComponent на тот же уровень CasillerosComponent.
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'navbar', component: NavbarComponent },
  {
    path: 'dashboard', component: DashboardComponent, data: { breadcrumb: 'Dashboard' },
    children: [
      { path: 'permisos', component: PermisosComponent, data: { breadcrumb: 'Permisos' }},
      { path: 'operarios', component: OperariosComponent, data: { breadcrumb: 'Operarios' }},
      { path: 'maquinas', component: MaquinasComponent, data: { breadcrumb: 'Máquinas' }},
      { path: 'materiales', component: MaterialesComponent, data: { breadcrumb: 'Materiales' }},
      { path: 'casilleros', component: CasillerosComponent, data: { breadcrumb: 'Casilleros' },},
      { path: 'historial', component: HistorialComponent, data: { breadcrumb: 'Historial' },},
    ],
  },
];

  1. Удалите указанный маршрутизатор из casilleros.comComponent.html.
  2. Адаптируйте навигацию в вашем casilleros.comComponent.ts.
    this.router.navigate(['dashboard/historial']);

Спасибо за ответ. Не работает :-( Меня выводит на панель управления

Pedro Madrigal 08.08.2024 18:00

Я видел, что вы также объявили выход в маршрутах. Удалите выход: 'casilleros' следующего маршрута {путь: 'исторический', компонент: HistorialComponent, data: {хлебная крошка: 'Исторический'}, выход: ' Касильерос ' }

Muhammed Misir 08.08.2024 20:22

URL-адрес меняется, а представление — нет. Когда я нажимаю кнопку, чтобы перейти к historialComponent, casillerosComponent остается в поле зрения.

Pedro Madrigal 09.08.2024 13:32

Это возможное и временное решение, хотя мне бы хотелось, чтобы хлебные крошки работали правильно, поскольку история будет зависеть от поля, выбранного в кнопке увеличительного стекла. Но спасибо, я пока иду дальше :-)

Pedro Madrigal 12.08.2024 16:43

Вы можете добавить relativeTo: this.activatedRoute, чтобы выполнить навигацию по вторичной торговой точке на основе текущего положения маршрута. Тогда путь будет узнаваем.

...
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
...

...
goToHistorial(item: any) {
     this.router.navigate([{ outlets: { casilleros: ['historial'] } }], {
         relativeTo: this.activatedRoute,
     });
}

Пример демо:

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-other-page',
  template: `
    <p>
      other page works!
    </p>
    <button (click) = "goToHistorial(item)" class = "btn btn-sm">test</button>
    <router-outlet name = "widget"></router-outlet>
  `,
})
export class OtherPageComponent {
  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
  goToHistorial(item: any) {
    this.router.navigate([{ outlets: { widget: ['mywidget'] } }], {
      relativeTo: this.activatedRoute,
    });
  }
}

Демо-версия Stackblitz

Спасибо, он работает, но не удаляет родительский html, а показывает содержимое нижнего дочернего элемента его родительскому элементу. Мое намерение состоит в том, чтобы удалить родительский контент из представления и отобразить дочерний контент.

Pedro Madrigal 08.08.2024 17:59

Другие вопросы по теме