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
接受 Observable
的 Array 并返回一个包含每个版本的最新值的数组。每个流都必须让步才能让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 8 - ng lint:超出最大调用堆栈大小错误
使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则