从 RxJS5 升级到 RxJS6
Upgrading from RxJS5 to RxJS6
我在从 RxJS5 升级到版本 6 时遇到问题。我有以下代码:
private captureEvents(canvasEl: HTMLCanvasElement) {
Observable
.fromEvent(canvasEl, 'mousedown')
.switchMap((e) => {
return Observable
.fromEvent(canvasEl, 'mousemove')
.takeUntil(Observable.fromEvent(canvasEl, 'mouseup'))
.pairwise()
})
.subscribe((res: [MouseEvent, MouseEvent]) => {
const rect = canvasEl.getBoundingClientRect();
const prevPos = {
x: res[0].clientX - rect.left,
y: res[0].clientY - rect.top
};
const currentPos = {
x: res[1].clientX - rect.left,
y: res[1].clientY - rect.top
};
this.drawOnCanvas(prevPos, currentPos);
});
}
但是当我升级到 RxJS6 时,出现以下错误:
Property 'fromEvent' does not exist on type 'typeof Observable'.
我试图从这个 (RxJS5) 更改我的导入:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/pairwise';
import 'rxjs/add/operator/switchMap';
对此(RxJS6):
import { Observable, fromEvent } from 'rxjs';
import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
这是我升级代码的最佳尝试:
private captureEvents(canvasEl: HTMLCanvasElement) {
const obsMouseDown = fromEvent(canvasEl, 'mousedown').pipe(
switchMap((e) => {
const obsMouseMove = fromEvent(canvasEl, 'mousemove').pipe(
takeUntil(a => {
const obsMouseUp = fromEvent(canvasEl, 'mouseup').pipe(
pairwise()
);
return obsMouseUp;
}));
return obsMouseMove;
}))
.subscribe((res: [MouseEvent, MouseEvent]) => {
const rect = canvasEl.getBoundingClientRect();
const prevPos = {
x: res[0].clientX - rect.left,
y: res[0].clientY - rect.top
};
const currentPos = {
x: res[1].clientX - rect.left,
y: res[1].clientY - rect.top
};
this.drawOnCanvas(prevPos, currentPos);
});
}
但这不起作用 - 我收到 "takeUntil" 代码的错误:
Argument of type '(a: any) => Observable<[Event, Event]>' is not
assignable to parameter of type 'Observable'
plnkr 原始代码示例:
https://embed.plnkr.co/QSvJxi/
fromEvent
现在已经是 Observable 类型了。您不需要将它链接到 Obserbal,而是可以直接调用它并将其影响到变量或更好的常量。如下图:
const source = fromEvent(document, 'click');
关于导入,你猜对了
import { fromEvent } from 'rxjs';
出于某种原因,您的 plnkr 对我不起作用,但我会尽力提供答案。我认为你应该在这里做两件事作为开始。尝试初始化您的 Observables,以便像这样调用和订阅它们更容易:
const mousedown$ = fromEvent(pauseButton, 'mousedown');
const mouseup$ = fromEvent(resumeButton, 'mouseup');
const mousemove$ = fromEvent(resumeButton, 'mousemove');
第二件事你现在应该使用 Rxjs 5 和 6 来管理你的操作员,就像这样,并订阅你所有的事件
mousedown$.pipe(
switchMap(res => {
mousemove$.pipe(//Whatever Operators and subscribitions to other events).subscribe(...)
}),
map(// Whatever you want back from your event)
).subscribe(...)
我指的是文档链接 switchMap && takeUntil。由于 Rxjs 中的许多语法正在发生变化,请不要羞于浏览文档,没有比这更好的了。
我认为你实际上非常接近,我认为你也有你的管道 "deep" 不过 - 请记住,你可以根据需要在管道中将任意数量的运算符链接在一起,所以你的内部鼠标移动直到-mouse-up switchmap 应该看起来更像这样:
private captureEvents(canvasEl: HTMLCanvasElement) {
const obsMouseDown = fromEvent(canvasEl, 'mousedown').pipe(
switchMap((e) => {
return fromEvent(canvasEl, 'mousemove').pipe(
takeUntil(a => fromEvent(canvasEl, 'mouseup')),
pairwise()
));
}))
.subscribe((res: [MouseEvent, MouseEvent]) => {
// snip
});
}
我在从 RxJS5 升级到版本 6 时遇到问题。我有以下代码:
private captureEvents(canvasEl: HTMLCanvasElement) {
Observable
.fromEvent(canvasEl, 'mousedown')
.switchMap((e) => {
return Observable
.fromEvent(canvasEl, 'mousemove')
.takeUntil(Observable.fromEvent(canvasEl, 'mouseup'))
.pairwise()
})
.subscribe((res: [MouseEvent, MouseEvent]) => {
const rect = canvasEl.getBoundingClientRect();
const prevPos = {
x: res[0].clientX - rect.left,
y: res[0].clientY - rect.top
};
const currentPos = {
x: res[1].clientX - rect.left,
y: res[1].clientY - rect.top
};
this.drawOnCanvas(prevPos, currentPos);
});
}
但是当我升级到 RxJS6 时,出现以下错误:
Property 'fromEvent' does not exist on type 'typeof Observable'.
我试图从这个 (RxJS5) 更改我的导入:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/pairwise';
import 'rxjs/add/operator/switchMap';
对此(RxJS6):
import { Observable, fromEvent } from 'rxjs';
import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
这是我升级代码的最佳尝试:
private captureEvents(canvasEl: HTMLCanvasElement) {
const obsMouseDown = fromEvent(canvasEl, 'mousedown').pipe(
switchMap((e) => {
const obsMouseMove = fromEvent(canvasEl, 'mousemove').pipe(
takeUntil(a => {
const obsMouseUp = fromEvent(canvasEl, 'mouseup').pipe(
pairwise()
);
return obsMouseUp;
}));
return obsMouseMove;
}))
.subscribe((res: [MouseEvent, MouseEvent]) => {
const rect = canvasEl.getBoundingClientRect();
const prevPos = {
x: res[0].clientX - rect.left,
y: res[0].clientY - rect.top
};
const currentPos = {
x: res[1].clientX - rect.left,
y: res[1].clientY - rect.top
};
this.drawOnCanvas(prevPos, currentPos);
});
}
但这不起作用 - 我收到 "takeUntil" 代码的错误:
Argument of type '(a: any) => Observable<[Event, Event]>' is not assignable to parameter of type 'Observable'
plnkr 原始代码示例:
https://embed.plnkr.co/QSvJxi/
fromEvent
现在已经是 Observable 类型了。您不需要将它链接到 Obserbal,而是可以直接调用它并将其影响到变量或更好的常量。如下图:
const source = fromEvent(document, 'click');
关于导入,你猜对了
import { fromEvent } from 'rxjs';
出于某种原因,您的 plnkr 对我不起作用,但我会尽力提供答案。我认为你应该在这里做两件事作为开始。尝试初始化您的 Observables,以便像这样调用和订阅它们更容易:
const mousedown$ = fromEvent(pauseButton, 'mousedown');
const mouseup$ = fromEvent(resumeButton, 'mouseup');
const mousemove$ = fromEvent(resumeButton, 'mousemove');
第二件事你现在应该使用 Rxjs 5 和 6 来管理你的操作员,就像这样,并订阅你所有的事件
mousedown$.pipe(
switchMap(res => {
mousemove$.pipe(//Whatever Operators and subscribitions to other events).subscribe(...)
}),
map(// Whatever you want back from your event)
).subscribe(...)
我指的是文档链接 switchMap && takeUntil。由于 Rxjs 中的许多语法正在发生变化,请不要羞于浏览文档,没有比这更好的了。
我认为你实际上非常接近,我认为你也有你的管道 "deep" 不过 - 请记住,你可以根据需要在管道中将任意数量的运算符链接在一起,所以你的内部鼠标移动直到-mouse-up switchmap 应该看起来更像这样:
private captureEvents(canvasEl: HTMLCanvasElement) {
const obsMouseDown = fromEvent(canvasEl, 'mousedown').pipe(
switchMap((e) => {
return fromEvent(canvasEl, 'mousemove').pipe(
takeUntil(a => fromEvent(canvasEl, 'mouseup')),
pairwise()
));
}))
.subscribe((res: [MouseEvent, MouseEvent]) => {
// snip
});
}