Angular 12，用户未登录时如何显示登录按钮，用户登录时如何显示用户头像

<!-- navbar.component.html -->
<div class="navbar">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <div *ngIf="!isLoggedIn">
    <button (click)="login()">Login</button>
  </div>
  <div *ngIf="isLoggedIn">
    <img [src]="userAvatar" alt="User Avatar">
  </div>
</div>

// navbar.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  isLoggedIn: boolean = false;
  userAvatar: string = '';

  login() {
    // 处理登录逻辑
    // 设置isLoggedIn为true，并获取用户头像
    this.isLoggedIn = true;
    this.userAvatar = 'path/to/user/avatar.jpg';
  }
}