Скрыть компонент счетчика, когда наблюдаемая завершена

Question

Я пытаюсь отобразить счетчик внутри кнопки, как только начинается определенная наблюдаемая, и скрывать его снова, как только он заканчивается.

После нескольких часов исследований я как-то растерялся, как я мог достичьэто (я знаю, что здесь есть несколько постов, но ни одна из них, кажется, не помогает, и даже часто упоминаемый angular-2-busy или одна из его вилок на самом деле не работает)

Так что рабочий процесс будет

У меня есть директива / компонент, к которому я могу предоставить Observable через @Input.Затем директива должна показывать счетчик, как только запускается Observable (или я могу просто использовать событие click).и он должен снова скрывать счетчик по окончании подписки.

Примечание: приведенные ниже примеры упрощены (без счетчика и т. д.), но точно показывают, в чем проблема.

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')));
    }
  }
}

здесь - стек стека , который иллюстрирует то, что я пытаюсь выполнить, а также то, что в настоящее время он не работает

Когда я вызываю subscribe в hello-component, он, очевидно, сразу выполняет каждый переданный по конвейеру метод, которыйэто не то, что я хочу.

Когда я не вызываю subscribe, оператор pipe создает новый subscription, который, очевидно, никогда не выполняется.

Требуемое поведение следующеевывод в консоль.

• "tap1"
• результат http-вызова
• "component"

У меня такое чувствоЯ упускаю что-то действительно очевидное.Есть идеи, как это решить?

Answer 1

Использование async и шаблонов может упростить жизнь для таких случаев, как прядильщик:

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

Вот блик стека.

Answer 2

Не совсем уверен, как вы хотите это сделать, но я расширил ваш Stackbiltz с помощью решения здесь .

Основная часть такова:

showSpinner = false;
  demo() {
    this.showSpinner = true;
    this.test.subscribe(
      tick => (console.log("event from observable")),
      error => (console.log("error from observable")),
      () => {console.log("Observable finished"); this.showSpinner=false;}
    )
  }

У наблюдаемой есть 3 типа событий: «галочка» будет получать каждый Observable.next, ошибка вызывается при ошибке, а после последнего события (если поток событий имеет конец) будет вызывать последний, последний вызов.Вы должны использовать это.

Редактировать : вы можете использовать трубу и нажать также на определение Observable:

  this.obs.pipe(
        tap(
          event => (console.log("observable event tick")),
          error => (console.log("observable error")),
          () => (console.log("observable finish"))
        )
      );

Edit2 : я переместил код вhello.component.ts в этот пример здесь .

Edit3 : Вы не можете "слушать слушателя".Но вы можете изменить свою логику, чтобы добиться желаемого поведения, см. этот обновленный пример .

По сути, вам нужно явно вызвать компонент, чтобы сообщить ему о начале и концесобытие спиннингового события.Вы можете просматривать компоненты с помощью @ViewChild, а затем напрямую вызывать их открытые методы.