Angular 角度2-在导航到其他组件时，如何在等待可观察和查询参数时显示微调器？

有两个组件

签出

和

订单摘要

。 在

签出

组件中有一个按钮，单击该按钮将使用服务

createOrder（）

。一旦

createOrder（）

服务完成，它将导航到

OrderSummary

组件，并将

Order

对象作为

queryParams

发送到

OrderSummary

组件。如何在两个组件的导航之间显示

spinner

或

loading

页面

签出

组件中的服务-

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

  }

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

在
OrderSummary
组件中-

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

  }

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

一个解决办法是
this.router.navigate（）返回承诺，即当导航完成时，承诺将被填满。
因此，您可以像这样使用它：

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

在服务中创建一个函数来切换微调器/加载器，以便每个组件都可以使用它。然后进入所需组件的Ngondestory（）并启用微调器，然后在另一个组件的ngOnInit（）中禁用它@BeshambherChaukhwan是否需要为此创建一个新组件？微调器是否可以显示在
签出
或
订单摘要
组件上？请提供一个演示代码，说明如何实现这一点。这取决于你想如何显示微调器。您可以将函数中的一个div附加到调用元素，也可以将它附加到主体本身，就像从app.component附加一样，但在这种情况下，微调器将出现在整个屏幕中，我的意思是在app.component.html中，默认情况下它将隐藏，并且仅根据服务函数切换为显示/隐藏否否不会隐藏任何数据。它将是一个css，只有这个div将显示hide rest，其他所有元素都将可见。现在你想如何在css中显示它