Question

我有一个Angular 2预先输入组件的代码如下：

this.question["input"] = new FormControl();
this.question["input"].valueChanges
        .debounceTime(400)
        .switchMap(term => this.question['callback'](term))
        .subscribe(
            data => {
                this.question["options"].length = 0;
                this.question["options"].push(...data);
            }
        );

哪个工作正常，但是我正在尝试向此事件添加加载动画，即动画在FormControl的值更改时启动，并在返回数据时结束。

有了这样说，有没有办法利用以下代码进入这个方法链？

...
    .valueChanges
    /* Start Animation or Run Custom Function Here */
    .switchMap(term => /* Run AJAX Here */)
    .subscribe(
        data => {
            /* End Animation Here */
        }
    );
...

感谢任何帮助。

Answer 1

这尚未经过测试，但它类似于我在我的应用中使用的代码...希望它有所帮助：

this.question["input"] = new FormControl();
this.question["input"].valueChanges
  .debounceTime(400)
  .switchMap(term => this.question['callback'](term))
  .subscribe(
     data => {
        this.question["options"].length = 0;
        this.question["options"].push(...data);
        this.startAnimation();
     },
     () => {this.completeAnimation()}
  );

startAnimation() {
   //start animation code here
}

completeAnimation() {
   //complete the animation here.
}

Answer 2

事实证明这很简单......要在切换地图中添加自定义代码，您只需执行以下操作即可。

this.question["input"] = new FormControl();
this.question["input"].valueChanges
    .debounceTime(400)
    .switchMap(term => {
        // custom code can go here.
        this.customAnimationStart();
        return this.question['callback'](term);
    })
    .subscribe(
        data => {
            this.question["options"].length = 0;
            this.question["options"].push(...data);
        },
        failed => console.error("Request Failed", failed),
        () => this.customAnimationEnd()
    );

让我了解这一尝试的诀窍是在你的功能之后return请求。

在FormControl的valueChanges事件

2 个答案: