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
  }

我的路由配置保持不变