使用 RxJS 修复旧版 Ionic/Angular 项目中的“this”上下文 TypeScript 错误

使用 RxJS 解决旧版 Angular 中的“this”上下文错误

在 Angular 中利用 TypeScript 和 RxJS 来通过模块化和优化的解决方案处理 Observable 链

import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { Observable, combineLatest, of } from 'rxjs';
import { switchMap, map, filter } from 'rxjs/operators';
import * as orgActions from './actions/orgActions';
import * as dataActions from './actions/dataActions';
@Injectable()
export class OrgEffects {
  constructor(private actions$: Actions,
              private dataChallenge: DataChallengeService,
              private dataMetric: DataMetricService) {}
  orgChangedSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(orgActions.UPDATE_ORG_SUCCESS),
      switchMap((org) => combineLatest([
        this.dataChallenge.challengeList$.pipe(filter(val => val !== null)),
        this.dataMetric.metrics$.pipe(filter(val => val !== null))
      ])
      .pipe(
        map(([challengeList, metrics]) =>
          new dataActions.DataRetrieved({ challengeList, metrics })
        )
      )
    ))
  );
}

在 Angular 中使用 Async/Await 语法和 RxJS 的替代方法

在 Angular 中使用 TypeScript Observables 实现 async/await 以处理“this”绑定上下文问题

import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { Observable, combineLatest, from } from 'rxjs';
import { switchMap, map, filter } from 'rxjs/operators';
import * as orgActions from './actions/orgActions';
import * as dataActions from './actions/dataActions';
@Injectable()
export class OrgEffects {
  constructor(private actions$: Actions,
              private dataChallenge: DataChallengeService,
              private dataMetric: DataMetricService) {}
  orgChangedSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(orgActions.UPDATE_ORG_SUCCESS),
      switchMap(async (org) => {
        const challengeList = await from(this.dataChallenge.challengeList$).pipe(filter(val => val !== null)).toPromise();
        const metrics = await from(this.dataMetric.metrics$).pipe(filter(val => val !== null)).toPromise();
        return new dataActions.DataRetrieved({ challengeList, metrics });
      })
    )
  );
}

在 Angular 中使用 Jasmine/Karma 对两种方法进行单元测试

Jasmine 和 Karma 测试用例，用于使用 TypeScript 验证 Angular 中的可观察处理和异步方法

import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { cold, hot } from 'jasmine-marbles';
import { Observable } from 'rxjs';
import { OrgEffects } from './org.effects';
import * as orgActions from './actions/orgActions';
import * as dataActions from './actions/dataActions';
describe('OrgEffects', () => {
  let actions$: Observable<any>;
  let effects: OrgEffects;
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        OrgEffects,
        provideMockActions(() => actions$)
      ]
    });
    effects = TestBed.inject(OrgEffects);
  });
  it('should dispatch DataRetrieved action when UPDATE_ORG_SUCCESS is triggered', () => {
    const action = orgActions.UPDATE_ORG_SUCCESS();
    const outcome = new dataActions.DataRetrieved({ challengeList: [], metrics: [] });
    actions$ = hot('-a', { a: action });
    const expected = cold('-b', { b: outcome });
    expect(effects.orgChangedSuccess$).toBeObservable(expected);
  });
});

有关 TypeScript 和 RxJS 上下文错误的常见问题

1. 是什么导致 TypeScript 的“this”上下文错误？
2. 这些错误经常发生在 'this' 类方法中的上下文与 TypeScript 所期望的不一致。使用 arrow functions RxJS 中的 'this' 保留预期的引用，有助于防止这种情况发生。
3. 怎么可以 switchMap 帮助管理异步数据？
4. switchMap 当新的 Observable 进入时，它会取消以前的 Observable 发射，从而使其非常适合处理频繁更新的异步数据，例如 HTTP 请求。
5. 为什么会 bind 解决一些“this”上下文错误？
6. bind 永久设置 'this' 函数的上下文，有助于避免上下文不匹配，特别是在将类方法作为回调传递时。
7. 有什么区别 combineLatest 和 forkJoin 在 RxJS 中？
8. combineLatest 当任何源 Observable 发出时发出，而 forkJoin 等待所有源 Observables 完成后再发射，使其适合单次发射。
9. 能 VS Code extensions 改进 TypeScript 错误的调试？
10. 是的，TypeScript Hero 和 Angular Language Service 等扩展提供实时反馈和建议，帮助更有效地解决上下文和键入错误。

关于在 Angular 中管理 TypeScript 错误的最终想法

使用 RxJS Observables 时解决 TypeScript 中的上下文错误需要采取谨慎的方法。使用像这样的运算符 结合最新 和类似的工具 VS代码 扩展可以使这些问题更易于管理，尤其是在较旧的 Angular 项目中。

维护这些策略和工具可确保您的应用程序随着时间的推移保持功能正常且更加高效。通过一致的方法，在 TypeScript 中处理上下文和异步数据将变得更加简化，有助于确保您的项目面向未来。