时间戳

首页 > 解决方案 > 角度 6 显示每个组件的预加载器，除了一个

angular - 角度 6 显示每个组件的预加载器，除了一个

问题描述

所以，我声明了这个Spinner组件，它只是一个简单的预加载 CSS 图形。它位于我的App组件上并检查我们是否正在加载任何 htpp 数据。如果是，它会显示微调器。如果我们不是，那么它会隐藏微调器：

<div class="spinner-container" *ngIf="loading">
  <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div></div>
  </div>
</div>

我现在有一种情况，我们根本不想在某个组件上显示微调器。我确实尝试使用网址来做到这一点：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, RoutesRecognized } from '@angular/router';
import { Subscription } from 'rxjs';

import { SpinnerService } from '../services/spinner.service';

@Component({
  selector: 'pyb-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent implements OnInit, OnDestroy {
  loading: boolean;

  private widgetUrls: any[] = ['scenarios', 'questions', 'answers', 'results']
  private url: string

  private routeSubscription: Subscription
  private spinnerSubscription: Subscription

  constructor(
    private route: Router,
    private spinnerService: SpinnerService
  ) { }

  ngOnInit() {
    this.routeSubscription = this.route.events.subscribe(event => this.getCurrentUrl(event));
    this.spinnerSubscription = this.spinnerService.onLoadingChanged.subscribe(loading => this.showSpinner(loading));
  }

  ngOnDestroy() {
    if (this.routeSubscription) this.routeSubscription.unsubscribe();
    if (this.spinnerSubscription) this.spinnerSubscription.unsubscribe();
  }

  private showSpinner(loading: boolean) {
    if (this.url) {
      let urlSegments = this.url.split('/');
      if (urlSegments.length > 1) {
        let lastSegment = urlSegments[urlSegments.length - 1];
        let index = this.widgetUrls.indexOf(lastSegment);

        if (index > -1) {
          this.loading = false;
          return;
        }
      }
    }

    this.loading = loading;
  }

  private getCurrentUrl(event: any) {
    if (event instanceof RoutesRecognized) {
      this.url = event.url;
    }
  }
}

但就我而言，这不起作用，因为我的组件有这样的路由：

const widgetRoutes: Routes = [
  { path: ':category', redirectTo: ':category/scenarios', pathMatch: 'full', data: { state: 'widget' } },
  { path: ':category/:path', component: WidgetComponent, data: { state: 'widget' } }
];

所以你可以去/cameras例如它会显示我的预加载器，但我不希望它。我可以在我的SpinnerComponent中为每个类别添加一个豁免，但这似乎很疯狂。

我想做的是检查路由更改时解析的组件的名称，然后如果它与我的组件匹配则隐藏预加载器。那可能吗？

标签： angular

解决方案

您可以使用属性“数据”将属性“noSpinner”添加到所有不需要微调器的路线

{ path: ':category/:path', 
  component: WidgetComponent, 
  data: { state: 'widget',noSpinner:true } 
}

如果你订阅了activatedRoute.data，你会得到值，如果！res.noSpinner，订阅onLoadingChange

this.activatedRoute.data.subscribe(res=>{
     console.log(res)
     if (!res.noSpinner)
          this.spinnerSubscription = this.spinnerService.onLoadingChanged
            .subscribe(loading => this.showSpinner(loading));
    })

好吧，你真的可以使用 switchMap 来获得一个订阅

this.spinnerSubscription = this.activatedRoute.data.pipe(
     switchMap(res=>{
       console.log(res)
       if (!res.noSpinner)
          return this.spinnerService.onLoadingChanged
       else 
          return of(false);
     }))
     .subscribe(loading => this.showSpinner(loading));

推荐阅读