javascript - Observable 完成时隐藏微调器组件

Question

我试图在某个可观察对象开始时立即在按钮内显示一个微调器，并在它结束后立即再次隐藏它。

经过几个小时的研究，我有点迷失了如何实现它(我知道这里有几个帖子，但似乎没有一个有帮助，甚至经常提到的 angular-2-busy 或其中一个分支也没有真的有用)

所以会有工作流程

我有一个指令/组件，我可以通过@Input 向其提供 Observable。该指令应在 Observable 启动后立即显示微调器(或者我可以只使用点击事件)。并且它应该在订阅完成时再次隐藏微调器。

注意:下面的示例是经过简化的(不涉及微调器等)，但准确显示了问题所在。

export class AppComponent {
  name = 'Angular 6';
  test: Observable<any>;

  constructor(private http: HttpClient) {

    const obs = of(true);
    this.test = obs.pipe(tap(() => console.log('tap1')), flatMap(() => {
      return this.http.get('https://httpbin.org/get');
    })
    );
  }

  demo() {
    this.test.subscribe((state: any) => console.log(state));
  }
}

export class HelloComponent implements OnChanges {
  @Input() name: string;

  @Input()
  obs: Observable<any>;

  ngOnChanges(changes: SimpleChanges): void {

    if (changes.obs) {
      this.obs.pipe(map(() => console.log('component')));
    }
  }
}

here is the stackblitz这说明了我试图完成的事情，也说明了它目前不起作用

当我在 hello-component 中调用 subscribe 时，它显然会立即执行每个管道方法，这不是我想要的。

当我不调用 subscribe 时，pipe 运算符会创建一个新的 subscription，显然它永远不会被执行。

所需的行为是控制台中的以下输出。

• “tap1”
• http 调用的结果
• “组件”

我觉得我错过了一些非常明显的东西。关于如何解决这个问题的任何想法？

Answer 1

使用 async 和模板可以让像 spinner 这样的情况变得更轻松:

<ng-container *ngIf="person$ | async as person; else loading">
    {{person.name}}
</ng-container>
<ng-template #loading>
    loading...
</ng-template>

Here is the stackblitz.