面试题：Angular服务的状态管理基础

创建服务：
- 使用Angular CLI命令 ng generate service user - login - status 来生成一个名为 UserLoginStatusService 的服务。这会在项目的 src/app 目录下生成一个 user - login - status.service.ts 文件。
定义服务内容：
- 在生成的 user - login - status.service.ts 文件中，编写如下代码：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserLoginStatusService {
  private isLoggedIn = false;

  getLoginStatus() {
    return this.isLoggedIn;
  }

  setLoginStatus(status: boolean) {
    this.isLoggedIn = status;
  }
}

这里使用 @Injectable 装饰器来标记这个类为一个可注入的服务，并通过 providedIn: 'root' 来指定该服务在根模块中提供，这意味着整个应用都可以使用这个服务。
定义了一个私有属性 isLoggedIn 来存储用户登录状态，并且提供了 getLoginStatus 和 setLoginStatus 方法来获取和设置登录状态。

在组件中使用服务：
- 在需要使用该服务的组件中，通过构造函数注入服务。例如，在 app.component.ts 中：

import { Component } from '@angular/core';
import { UserLoginStatusService } from './user - login - status.service';

@Component({
  selector: 'app - root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private userLoginStatusService: UserLoginStatusService) {}

  login() {
    this.userLoginStatusService.setLoginStatus(true);
  }

  logout() {
    this.userLoginStatusService.setLoginStatus(false);
  }

  getStatus() {
    return this.userLoginStatusService.getLoginStatus();
  }
}

这里在 AppComponent 的构造函数中注入了 UserLoginStatusService，然后定义了 login、logout 和 getStatus 方法来调用服务中的相应方法，实现对用户登录状态的管理。
在组件的模板（app.component.html）中可以这样使用：

<button (click)="login()">登录</button>
<button (click)="logout()">注销</button>
<p *ngIf="getStatus()">用户已登录</p>
<p *ngIf="!getStatus()">用户未登录</p>

这样就实现了通过服务来管理组件间共享的用户登录状态。

星途面试题库

面试题：Angular服务的状态管理基础

知识考点

面试题答案