mcpField
A
angular-reactive

angular-reactive

github.com/oguzhan18开发7177 次安装31 周前更新
代码仓库

关于 angular-reactive

面向使用响应式编程和 RxJS 的 Angular 开发者的参考技能，介绍状态服务、基于 Observable 的数据访问、模板订阅、缓存和清理模式。

主要功能

  1. 01BehaviorSubject 状态模式
  2. 02基于 Observable 的服务
  3. 03async pipe 用法
  4. 04shareReplay 缓存
  5. 05takeUntil 清理

适用场景

  1. 01通过服务共享状态
  2. 02在模板中显示 Observable 数据
  3. 03缓存 HTTP 结果
  4. 04清理订阅

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-reactive

安装后在 Claude Code 中输入/angular-reactive确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 响应式编程

版本： Angular 21 (2025) 标签： 响应式、Observables、RxJS、BehaviorSubject

参考： 响应式指南 • RxJS

最佳实践

  • 使用 BehaviorSubject 管理状态
@Injectable({ providedIn: 'root' })
export class StateService {
  private state = new BehaviorSubject<State>(initialState);
  state$ = this.state.asObservable();
  
  updateState(newState: Partial<State>) {
    this.state.next({ ...this.state.value, ...newState });
  }
}
  • 在服务中使用 Observable
@Injectable({ providedIn: 'root' })
export class DataService {
  private http = inject(HttpClient);
  
  getData(): Observable<Data[]> {
    return this.http.get<Data[]>('/api/data');
  }
}
  • 使用 async pipe
@Component({
  template: `
    @if (data$ | async; as data) {
      {{ data.name }}
    }
  `
})
export class MyComponent {
  data$ = this.service.getData();
}
  • 使用 shareReplay 进行缓存
data$ = this.http.get('/api/data').pipe(
  shareReplay(1)
);
  • 使用 takeUntil 进行清理
@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.data$.pipe(takeUntil(this.destroy$)).subscribe();
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

评论

支持 Markdown