我如何使用 Angular 13 中的按钮路由到同一页面

Question

我的项目目前有一个登录页面和一个仪表板页面，您只能通过登录访问。在仪表板页面中，您有一个带有不同按钮的侧边栏，每个按钮对应一个组件。我想要发生的是当我单击它们各自的按钮时，让我的应用程序在仪表板主体中显示不同的组件。相反，我被完全重定向到一个单独的页面，并从我的仪表板中丢失了我的导航栏和侧边栏。

这是我的代码：

home-page.component.html（基本上是仪表板）

<app-navbar></app-navbar>
<app-sidenav></app-sidenav> 
<app-body></app-body>

navbar.component.html

<nav class="navbar navbar-expand-lg navbar-custom">    
 <div class="container-fluid">     
  <img src="https://www.tunisietrade.net/wp-content/uploads/2020/11/logo_TTN_vectorise-1.png" class="navbar-brand" height="50" width="110">      
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">         
<span class="navbar-toggler-icon"></span>      
 </button>      
 <div class="collapse navbar-collapse" id="navbarSupportedContent">        
 <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>         
<form class="disconnect">          
 <button [routerLink]="['/login']" class="btn btn-outline-danger" type="submit">Disconnect</button>
</form>       
</div>     
</div>   
</nav>

sidenav.component.html

`

<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="border-right sidebar-col " id="sidebar-wrapper"  [ngClass]="status ? 'hide' : 'show'">
  <div class="sidebar-heading">Dashboard</div>
  <div class="list-group list-group-flush ">
    <a href="facture" class="list-group-item list-group-item-action element-red">Facture</a>
    &nbsp;
    <a href="fournisseur" class="list-group-item list-group-item-action element-red">Fournisseur</a>
    &nbsp;
    <a href="reglement" class="list-group-item list-group-item-action element-red">Règlement</a>
    &nbsp;
    <a href="banques" class="list-group-item list-group-item-action element-red">Banques</a>
    &nbsp;
    <a href="comptes" class="list-group-item list-group-item-action element-red">Comptes</a>
    &nbsp;
  </div>
</div>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">

  <nav class="navbar navbar-expand-lg sidebar-col">
   
    <div class="container-fluid">
      <button class="btn" (click)="clickEvent()"></button>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
      </div>
    </div>
  </nav>
</div>

body.component.html

<router-outlet></router-outlet>

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BanquesComponent } from './home-page/banques/banques.component';
import { ComptesComponent } from './home-page/comptes/comptes.component';
import { FactureComponent } from './home-page/facture/facture.component';
import { FournisseurComponent } from './home-page/fournisseur/fournisseur.component';
import { HomePageComponent } from './home-page/home-page.component';
import { ReglementComponent } from './home-page/reglement/reglement.component';
import { LoginPageComponent } from './login-page/login-page.component';

const routes: Routes = [
  {path: '', component : LoginPageComponent},
  {path: 'homepage', component:HomePageComponent},
  {path:'facture', component:FactureComponent},
  {path:'fournisseur', component:FournisseurComponent},
  {path:'reglement', component:ReglementComponent},
  {path:'banques', component:BanquesComponent},
  {path:'comptes', component:ComptesComponent},
  {path:'login',component:LoginPageComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomePageComponent]

我的仪表板：

当我单击任何按钮时，即“Facture”：

我尝试将导航栏和侧边栏硬编码到我试图路由到的每个组件中，但这没有用，它似乎是一种解决问题的方法，而不是我试图找到的修复方法。

Answer 1

您可以使用 ng-content 通过一些内容投影来解决这个问题。你可以用它来做这样的事情（假设你想在 sidenav-component 内渲染路由组件）：

<!-- Page Content -->
<div id="page-content-wrapper">

  <nav class="navbar navbar-expand-lg sidebar-col">
   
    <div class="container-fluid">
      <button class="btn" (click)="clickEvent()"></button>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ng-content select=".app-content"></ng-content>
      </div>
    </div>
  </nav>
</div>

然后在您的 home-page.component 中，您可以这样做：

<app-navbar></app-navbar>
<app-sidenav>
  <app-body class=".app-content"></app-body>
</app-sidenav>

Answer 2

你的路线应该看起来像这样使用 router-outlet 在 body.component.html 中声明：

const routes: Routes = [
  {path: '', component : LoginPageComponent},
  {path: 'homepage', component:HomePageComponent, children: [
      {path:'facture', component:FactureComponent},
      {path:'fournisseur', component:FournisseurComponent},
      {path:'reglement', component:ReglementComponent},
      {path:'banques', component:BanquesComponent},
      {path:'comptes', component:ComptesComponent}
  ]},
  {path:'login',component:LoginPageComponent}
];

在您的 sidenav.component 中，您应该使用 routerLink="/homepage/reglement"

而不是 href="reglement"

我如何使用 Angular 13 中的按钮路由到同一页面

How do i route to the same page using a button in Angular 13

html

css

frontend

bootstrap-4

angular