Angular 6中如何使用rxjs的Subject？解决模块找不到问题

嘿，这个问题我太熟悉了！Angular 6对应的RxJS版本是6.x，这个版本对导入结构做了大幅调整，你之前的写法在RxJS 5里没问题，但到6.x就会报错找不到模块啦。下面给你一步步讲怎么改：

1. 修正Subject的导入路径 #

RxJS 6把所有核心类（包括Subject、Observable这些）都移到了根路径rxjs下，所以原来的导入要改成：

import { Subject } from 'rxjs';

再也不用从rxjs/Subject这种子路径导入了～

2. 优化你的登录状态服务实现 #

为了保证状态的可控性（避免外部直接调用next()修改状态），建议把内部的Subject转换成Observable对外暴露。这里给你一个更规范的服务示例：

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

@Injectable({
  providedIn: 'root' // Angular 6+推荐的服务注入方式
})
export class LoginService {
  // 私有Subject，仅服务内部可以修改
  private loginStateSubject = new Subject<boolean>();
  // 对外暴露Observable，外部只能订阅不能修改
  loginState$ = this.loginStateSubject.asObservable();

  // 提供公共方法来更新登录状态
  setLoginState(isLoggedIn: boolean) {
    this.loginStateSubject.next(isLoggedIn);
  }
}

3. 在组件中订阅状态 #

组件里的订阅逻辑基本不变，但记得要处理订阅的销毁，防止内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { LoginService } from './login.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  private loginSubscription!: Subscription;

  constructor(private loginService: LoginService) {}

  ngOnInit() {
    this.loginSubscription = this.loginService.loginState$.subscribe(state => {
      console.log('Login State');
      console.log(state);
      // 这里可以更新组件内的状态，比如修改视图显示
    });
  }

  // 组件销毁时取消订阅
  ngOnDestroy() {
    if (this.loginSubscription) {
      this.loginSubscription.unsubscribe();
    }
  }
}

额外小技巧：用async管道简化订阅 #

如果你不想手动处理订阅和销毁，可以用Angular的async管道，模板里直接这样写：

<div *ngIf="loginService.loginState$ | async">用户已登录</div>
<div *ngIf="!(loginService.loginState$ | async)">用户未登录</div>

这样Angular会自动帮你管理订阅的生命周期，省心又安全！

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