Angular 2-当用户登录时，仅在导航栏上显示某些元素

// 导航栏组件
import { Component } from '@angular/core';
import { AuthService } from 'path/to/auth.service';

@Component({
  selector: 'app-navbar',
  template: `
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li *ngIf="authService.isLoggedIn()"><a href="#">Profile</a></li>
        <li *ngIf="authService.isLoggedIn()"><a href="#">Settings</a></li>
        <li *ngIf="!authService.isLoggedIn()"><a href="#">Login</a></li>
      </ul>
    </nav>
  `
})
export class NavbarComponent {
  constructor(public authService: AuthService) {}
}

// 认证服务
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  private loggedIn = false;

  isLoggedIn() {
    return this.loggedIn;
  }

  login() {
    // 登录逻辑
    this.loggedIn = true;
  }

  logout() {
    // 登出逻辑
    this.loggedIn = false;
  }
}

// 登录组件
import { Component } from '@angular/core';
import { AuthService } from 'path/to/auth.service';

@Component({
  selector: 'app-login',
  template: `
    <form (submit)="login()">
      <!-- 登录表单 -->
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent {
  constructor(private authService: AuthService) {}

  login() {
    // 登录逻辑
    this.authService.login();
  }
}