我如何使用Angular13中的按鈕路由到同一頁面

我的專案目前有一個登錄頁面和一個儀表板頁面，您只能通過登錄訪問。在儀表板頁面中，您有一個帶有不同按鈕的側邊欄，每個按鈕對應一個組件。我想要發生的是讓我的應用程式在我單擊它們各自的按鈕時在儀表板的主體中顯示不同的組件。相反，我被完全重定向到一個單獨的頁面，并從我的儀表板中丟失了我的導航欄和側邊欄。

這是我的代碼：

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 id="wrapper">

<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>

應用程式路由.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”：

我嘗試將導航欄和側邊欄硬編碼到我試圖路由到的每個組件中，但這沒有用，它似乎是一種解決問題的方法，而不是我試圖找到的修復方法。

uj5u.com熱心網友回復：

使用 body.component.html 中宣告的 router-outlet 時，您的路由應如下所示：

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}
];

而不是 href="reglement" 在你的 sidenav.component 你應該使用 routerLink="/homepage/reglement"

uj5u.com熱心網友回復：

您可能可以通過使用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> 

uj5u.com熱心網友回復：

您可以使用控制器中的路由器重新加載相同的路由

首先在匯入路由器模塊的模塊中，您必須定義路由器遇到相同 url 時的行為（在以下示例中重新加載頁面）

@ngModule({
 imports: [
     RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})
 ],
 ...
})

然后您可以使用路由器的導航方法重新加載頁面

navbar.component.html

<button (click)="disconnect()" class="btn btn-outline-danger" type="submit">Disconnect</button>

navbar.component.ts

 this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate(['/login'));

標籤：html css 有角度的 引导程序 4 前端

上一篇：如何使用PrimeNGp-tableangular只點擊一個單選按鈕

下一篇：如何在接收來自frokJoin訂閱的資料時發出observable