根据用户是否登录Angular来呈现不同内容的最佳方式是什么？

// auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {
    // 检查用户是否已登录，这里使用一个假设的isLoggedIn变量来表示登录状态
    const isLoggedIn = true; // 假设已登录

    if (!isLoggedIn) {
      // 如果用户未登录，则重定向到登录页面
      this.router.navigate(['/login']);
      return false;
    }

    return true;
  }
}

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
];

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