Angular 6 ng lint combineLatest 已弃用

Posted

技术标签:

【中文标题】Angular 6 ng lint combineLatest 已弃用【英文标题】:Angular 6 ng lint combineLatest is deprecated 【发布时间】:2018-10-20 19:20:10 【问题描述】:

我最近从 Angular 5 更新到 Angular 6。

我收到此警告 combineLatest is deprecated: resultSelector no longer supported, pipe to map instead。 Rxjs 是 6.1.0 版本,tslint 是 5.10.0,Angular CLI 是 6.0.0 和 Typescript 2.7.2。我是这样使用它的:

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => (auth, url),
);

我也试过这样:

empty().pipe(
combineLatest(...),
  ...
)

但这给了我:combineLatest is deprecated: Deprecated in favor of static combineLatest 和 empty 也被弃用,有利于它的静态版本。

【问题讨论】:

你也可以试试 a$.pipe(a$ => combineLatest(a$,b$, c$)); with import combineLatest from 'rxjs'; 【参考方案1】:

combineLatest 已弃用:不再支持 resultSelector,改为使用管道映射

上述警告建议删除您在 combineLatest observable 中提供的最后一个函数 resultSelector 并将其作为 map 运算符的一部分提供,如下所示

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl)
);

const result$ = a$.pipe(
  map(results => (auth: results[0], url: results[1]))
)

更新:

如果你看到 combineLatest is deprecated: Pass arguments in a single array instead 那么只需添加 []:

const a$ = combineLatest([
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl)
]);
    
const result$ = a$.pipe(
  map(results => (auth: results[0], url: results[1]))
)

【讨论】:

谢谢!这可行,但 combineLatest 会创建一个数组,所以我必须这样做:const result$ = a$.pipe(map((a) => (auth: a['0'], url: a['1']))); 个人偏好,但我更喜欢这里的destructuring assignment,而不是映射到新对象。所以喜欢:const result$ = a$.pipe(tap(([auth, url]) => /* ... */ )); 如果我想像旧的combineLatest()那样使用投影仪功能,我该怎么做? 更新***.com/a/67792658/5466477【参考方案2】:

不幸的是,如果您从运营商导入 combineLatest,您也可能会收到 tslint 错误:

import  combineLatest  from 'rxjs/operators';

combineLatest(...array);

而不是,

import  combineLatest  from 'rxjs';

combineLatest(...array);

【讨论】:

【参考方案3】:

与已弃用的版本不同,combineLatest 接受 ObservableArray 并返回一个包含每个版本的最新值的数组。每个流都必须让步才能让combineLatest 让步。

fruitType$ = combineLatest([this.entity$, this.datasetStateService.get$('Fruits')])
  .pipe(map(data => 
    const entity = data[0];
    const dataset = data[1];
    return 
       isApple: (dataset.find(ds => ds.label === 'Apple') as DataItem).id === entity.fruitId,
       isOrange: (dataset.find(ds => ds.label === 'Orange') as DataItem).id === entity.fruitId
    
));

【讨论】:

【参考方案4】:

trailing comma错误,去掉(auth, url) => (auth, url)后面的逗号

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => (auth, url),  // Remove this comma.
);

对于missing import 错误,请确保您已导入文件中正在使用的所有外部变量或类。

例如,在这种情况下,如果您还没有导入combineLatest,则导入它

import  combineLatest  from 'rxjs'; // For RxJS 6.x

import  combineLatest  from 'rxjs/operators'; // For RxJS 5.x

【讨论】:

谢谢,但我想我并不清楚。这些不是实际问题,但我只是举例说明问题是如何被报告两次的。我已经编辑了我的问题。【参考方案5】:

在我的情况下,这是因为我明确设置了泛型参数,因此选择了不正确的 combineLatest 重载。为了摆脱我已经改变的警告

combineLatest<void>([
    firstObservable$,
    secondObservable$
]);

combineLatest([
    firstObservable$,
    secondObservable$
]).pipe(
    mapTo(undefined)
);

【讨论】:

【参考方案6】:

我会这样解决:

auth$ = this.aStore.select(b.getAuth);
url$ = this.cStore.select(b.getUrl);

combinedResult$ = combineLatest([this.auth$, this.url$]).pipe(
    map(([auth, url]) => (auth, url))
)

【讨论】:

【参考方案7】:

这个错误也可能是由于传入Subscription 项目的数组,而不是实际的 observables 引起的,哈哈。 (我在这方面真的很草率。)

错了!

const foo = Foo$.subscribe(f => 
  // do something with f here
)

const bar = Bar$.subscribe(b => 
  // do something with b here
)

combineLatest([foo, bar]).subscribe(([f, b]) => 
  // do something after both foo$ and bar$ have emitted something
)

正确!

const foo$ = Foo$.pipe(
  tap(f => 
    // do something with f here
  )
)

const bar$ = Bar$.pipe(
  tap(b => 
    // do something with b here
  )
)

combineLatest([foo$, bar$]).subscribe(([f, b]) => 
  // do something after both Foo$ and Bar$ have emitted something
)

【讨论】:

【参考方案8】:

我使用 deprericated combineLatest 将这两个 observable 组合起来 this.route.paramMap + this.route.queryParamMap:

combineLatest(this.route.paramMap, this.route.queryParamMap)
  .subscribe(combined => 
    const idFollower = combined[0].get('id');
    const page = combined[1].get('page');
  )

【讨论】:

以上是关于Angular 6 ng lint combineLatest 已弃用的主要内容,如果未能解决你的问题,请参考以下文章

Angular-cli:使用 ng lint

Angular 8 - ng lint:超出最大调用堆栈大小错误

在文件保存时将 Angular 配置为“ng lint”

使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则

lint-staged 正在为所有更改的文件运行 ng -lint,而不仅仅是暂存文件

如何删除 WebStorm sass-lint 错误“未知的伪选择器 'ng-deep'”