Angular 中具有多個組件的一個路由器

Question

我有兩個組件，它們是 DashboardComponent 和 LoginComponent。 當用戶訪問我的網站 url 即 http://localhost:4200 如果用戶尚未登錄，我必須呈現 LoginComponent。 如果用戶已經登錄，我必須在同一路徑中呈現儀表板組件，即 http://localhost:4200

this.router.navigate(['login']);

使用它需要另一條路線（/登錄）。 但我必須根據登錄條件在同一路線中切換組件，就像 facebook，instagram 一樣。 如何在 angular 中實現這一點？

更新這是我的路由器配置

const routes: Routes = [
  {path: '', component: DashboardComponent}
];

Answer 1

不知何故，我找到了解決方法。 但我不確定這是否是正確的方法！

在 DashboardComponent.html

<app-login *ngIf="!loginService.isUserLoggedIn()"></app-login>
<p *ngIf="loginService.isUserLoggedIn()">dashboard works!
        <button (click)="loginService.logOut()" class="btn btn-danger">logout</button>
</p>

創建登錄服務

export class LoginService {

  constructor() { }

  public authenticate(username, password) {
    if (username === "abishek" && password === "password") {
      sessionStorage.setItem('username', username)
      return true;
    } else {
      return false;
    }
  }

  public isUserLoggedIn() {
    let user = sessionStorage.getItem('username')
    return !(user === null)
  }

  public logOut() {
    sessionStorage.removeItem('username')
  }
}

在 LoginComponent.ts 中單擊調用checkLogin()的登錄按鈕 function

checkLogin() {
    if (this.loginservice.authenticate(this.username, this.password)
    ) {
      this.router.navigate([''])
    } else
      // some error
  }

我的路由配置保持不變