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'] } }]);
}
}
Ответы 2
Если я вас правильно понимаю. Ваша проблема заключается в структуре вашей маршрутизации и в том, как вы управляете отображением дочерних компонентов в вашем угловом приложении.
Сделайте следующий шаг.
- Удалите указанный маршрутизатор из casilleros.comComponent.html.
- Адаптируйте навигацию в вашем 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), а не выполнял рендеринг внутри него.
Сделайте следующий шаг.
- Адаптируйте маршруты: переместите 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' },},
],
},
];
- Удалите указанный маршрутизатор из casilleros.comComponent.html.
- Адаптируйте навигацию в вашем casilleros.comComponent.ts.
this.router.navigate(['dashboard/historial']);
Я видел, что вы также объявили выход в маршрутах. Удалите выход: 'casilleros' следующего маршрута {путь: 'исторический', компонент: HistorialComponent, data: {хлебная крошка: 'Исторический'}, выход: ' Касильерос ' }
URL-адрес меняется, а представление — нет. Когда я нажимаю кнопку, чтобы перейти к historialComponent, casillerosComponent остается в поле зрения.
Это возможное и временное решение, хотя мне бы хотелось, чтобы хлебные крошки работали правильно, поскольку история будет зависеть от поля, выбранного в кнопке увеличительного стекла. Но спасибо, я пока иду дальше :-)
Вы можете добавить 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, а показывает содержимое нижнего дочернего элемента его родительскому элементу. Мое намерение состоит в том, чтобы удалить родительский контент из представления и отобразить дочерний контент.
Спасибо за ответ. Не работает :-( Меня выводит на панель управления