Angular 7中如何用Subscribe判断服务响应并设置loading=false

嘿，我来帮你搞定这个问题！你现在用了async pipe来订阅分类数据，但想要在拿到服务响应后把loading设为false，用subscribe的话其实很直接，分两种场景给你说：

1. 直接用subscribe手动处理数据和loading #

如果不想依赖async pipe了，直接手动订阅服务并赋值，同时控制loading状态：

首先在组件里初始化变量：

import { Component, OnInit } from '@angular/core';
import { CategoryService } from './category.service'; // 替换成你的服务实际路径

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html'
})
export class CategoryComponent implements OnInit {
  loading = true; // 默认开启加载状态
  categories: Category[] = []; // 用普通数组存储数据，替换原来的Observable类型

  constructor(private _categoryService: CategoryService) {}

  ngOnInit(): void {
    // 调用服务并订阅响应
    this._categoryService.getAll().subscribe({
      // 成功获取到服务响应时触发
      next: (categories) => {
        this.categories = categories;
        this.loading = false; // 拿到数据后立即关闭loading
      },
      // 服务请求出错时触发（比如网络异常）
      error: (error) => {
        console.error('获取分类数据失败:', error);
        this.loading = false; // 出错也要关闭loading，避免页面一直卡在加载状态
      },
      // 不管成功失败，订阅完成时都会触发（可选）
      complete: () => {
        // 如果想统一在这里关闭loading也可以，根据你的需求选择
        // this.loading = false;
      }
    });
  }
}

对应的模板可以这么写：

<!-- 加载状态提示 -->
<div *ngIf="loading">加载中...</div>

<!-- 数据展示区域 -->
<div *ngIf="!loading">
  <ul>
    <li *ngFor="let category of categories">{{ category.name }}</li>
  </ul>
</div>

2. 保留async pipe同时处理loading #

如果你还想保留async pipe自动订阅/取消订阅的优势，也可以在pipe里结合tap操作符，或者单独订阅一次服务来控制loading：

import { Component, OnInit } from '@angular/core';
import { Observable, tap } from 'rxjs';
import { CategoryService } from './category.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html'
})
export class CategoryComponent implements OnInit {
  loading = true;
  categories$: Observable<Category[]>;

  constructor(private _categoryService: CategoryService) {}

  ngOnInit(): void {
    this.categories$ = this._categoryService.getAll().pipe(
      tap({
        next: () => this.loading = false,
        error: () => this.loading = false
      })
    );

    // 或者单独订阅一次（不影响async pipe的订阅逻辑）
    // this._categoryService.getAll().subscribe({
    //   next: () => this.loading = false,
    //   error: () => this.loading = false
    // });
  }
}

模板里依然用async pipe：

<div *ngIf="loading">加载中...</div>
<div *ngIf="!loading">
  <ul>
    <li *ngFor="let category of categories$ | async">{{ category.name }}</li>
  </ul>
</div>

重要提醒：避免内存泄漏 #

如果用手动subscribe的方式，一定要在组件销毁时取消订阅，防止内存泄漏。可以用takeUntil操作符实现：

import { Subject, takeUntil } from 'rxjs';

// 组件内新增一个用于销毁订阅的Subject
private destroy$ = new Subject<void>();

ngOnInit(): void {
  this._categoryService.getAll()
    .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
    .subscribe({
      next: (categories) => {
        this.categories = categories;
        this.loading = false;
      },
      error: (error) => {
        console.error(error);
        this.loading = false;
      }
    });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

这样就完美解决你的需求啦！

内容的提问来源于stack exchange，提问作者user9846301