Angular 2 - Как отобразить счетчик при ожидании observable и queryParams при переходе к другому компоненту?

#angular

Вопрос:

Есть 2 компонента Checkout и OrderSummary . В Checkout Компоненте есть кнопка , при нажатии на которую будет использоваться сервис createOrder() .Как только createOrder() служба будет завершена, она перейдет к OrderSummary Компоненту и отправит Order объект как queryParams к OrderSummary Компоненту.Как может spinner отображаться страница или loading страница между навигацией по 2 компонентам.

Обслуживание в Checkout компоненте —

   onSubmit(){
    this.checkoutService.checkout(this.shippingMethod,this.shippingAddress,this.payment,this.billingAddress).subscribe(
      res=>{
          this.order = res.json();
          this.router.navigate(['/orderResult'],{queryParams:{order:JSON.stringify(this.order)}});
      },
      error=>{
          this.order.orderStatus = "failed";
          this.router.navigate(['/orderResult'],{queryParams:{order:JSON.stringify(this.order)}});
      }
    );

  }

В OrderSummary компоненте —

   ngOnInit() {
    this.activatedRoute.queryParams.subscribe(
      queryParams =>{
        this.order = JSON.parse(queryParams['order']);
        console.log(JSON.stringify(this.order));
        console.log(this.order.orderStatus);
        if(this.order.orderStatus == "placed"){
          this.orderResult = true;
        }
        this.cartItemList = this.order.cartItemList;
        this.estimatedDeliveryDate = this.order.shippingDate;
      }
    );
  }

1. Создайте функцию в сервисе для переключения счетчика / загрузчика, чтобы каждый компонент мог его использовать. Затем перейдите в ngOnDestroy требуемого компонента () и включите счетчик и отключите его в ngOnInit() другого компонента

2. @BeshambherChaukhwan нужно ли мне для этого создать новый компонент?, может ли счетчик отображаться поверх checkout компонента или ordersummary компонента? Пожалуйста, предоставьте демонстрационный код того, как это может быть достигнуто.

3. Это зависит от того, как вы хотите показать счетчик. Вы можете просто добавить div из функции к вызывающему элементу или, может быть, вы можете добавить его к самому телу, как из app.component, но в этом случае счетчик будет отображаться на весь экран

4. Я имею в виду, что <div id=»spinner»></div> в app.component.html и он будет скрыт по умолчанию и будет переключаться только на отображение / скрытие в зависимости от сервисной функции.

5. Нет, нет, он не будет скрывать никаких данных. Это будет css, и только этот div будет показывать hide, остальные все элементы будут видны. Теперь, как вы хотите показать, что все это в css

Ответ №1:

одно из решений таково.router.navigate() возвращает обещание, т.е. Когда навигация завершена, обещание будет выполнено. таким образом, вы можете использовать его как:

 onSubmit() {
 this.showLoader()// your way of showing loader
 //await call api 
 this.router.navigate(['path']).then(res => {
this.hideLoader()})
}