當我點擊注銷時，我的登錄頁面沒有顯示

Question

當我在表單中輸入用戶test1 。

第一步

顯示了我的儀表板，其中包含 2 個元素Bonjour和Logout 。

第二步

當我點擊Logout ，會顯示一個奇怪的頁面......

第三步

我確定問題出在這里

<app-dashboard-layout [configuration]="configuration" *ngIf="currentUser">
  <div container="sidePanel">
    <app-navigation-side-panel [links]="links"></app-navigation-side-panel>
  </div>
  <div container="navigationBar" *ngIf="currentUser">
    <app-navigation-bar></app-navigation-bar>
  </div>
  <div container="mainContent">
    <div>
      <a style="color: black" (click)="logout()">Logout </a>
      <router-outlet></router-outlet>
    </div>
  </div>
</app-dashboard-layout>
<router-outlet></router-outlet>

我沒有立即的解決方案...

https://stackblitz.com/edit/angular-ivy-3r4a6v?file=src/app/app.component.html

Answer 1

<app-dashboard-layout
  [configuration]="configuration"
  *ngIf="currentUser; else notLoggedIn"
>
  <div container="sidePanel">
    <app-navigation-side-panel [links]="links"></app-navigation-side-panel>
  </div>
  <div container="navigationBar" *ngIf="currentUser">
    <app-navigation-bar></app-navigation-bar>
  </div>
  <div container="mainContent">
    <div>
      <a style="color: black" (click)="logout()">Logout </a>
      <router-outlet></router-outlet>
    </div>
  </div>
</app-dashboard-layout>
<ng-template #notLoggedIn>
  <router-outlet></router-outlet>
</ng-template>

我已經更新了你的例子。 您的問題是，您有兩個<router-outlet> 。 當您將第二個包裝在模板中並將其連接到您的 if currentUser 時，它可以正常工作。