Angular 角度6显示除一个部件外的每个部件的预紧力

因此，我声明了这个微调器组件，它只是一个简单的预加载CSS图形。 它位于我的应用程序组件上，检查我们是否正在加载任何htpp数据。 如果是，它会显示旋转器。如果不是，则它会隐藏微调器：

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

但在我的情况下，这将不起作用，因为我的组件有如下路由：

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

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' }, // Put first so it redirects :)
  { path: '', component: HomeComponent, data: { state: 'home' } },

  // Lazy load
  { path: '', loadChildren: './widget/widget.module#WidgetModule', data: { state: 'widget', disableSpinner: true } }, // Put this last as it has empty path

  // 404
  { path: '**', component: HomeComponent }, // 404?
]

例如，您可以转到

/cameras

，它将显示我的预加载程序，但我不希望这样。 我可以在我的喷丝器组件中为每一个类别设置一个豁免，但这似乎太疯狂了

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

您可以使用属性“data”将属性“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));

---

我将详细介绍Eliseo的答案。他所说的是对的，但这只是部分回答。 实际答案是将我的ngOnInit更改为：

ngOnInit() {
  this.spinnerSubscription = this.router.events
    .pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(route => route.firstChild),
      switchMap(route => route.data),
      switchMap(data => {
        if (!data.disableSpinner)
          return this.spinnerService.onLoadingChanged
        else 
          return of(false);
      })
    ).subscribe(loading => this.loading = loading);
}

完成后，我可以像这样使用路线中的数据：

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

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' }, // Put first so it redirects :)
  { path: '', component: HomeComponent, data: { state: 'home' } },

  // Lazy load
  { path: '', loadChildren: './widget/widget.module#WidgetModule', data: { state: 'widget', disableSpinner: true } }, // Put this last as it has empty path

  // 404
  { path: '**', component: HomeComponent }, // 404?
]

这里要注意一件事；如果使用的是延迟加载，则必须确保数据对象是初始声明的一部分。 我确实在我的小部件路由模块中声明了我的

数据

对象，但它被忽略了

我希望这对其他人有帮助

附言：确保这确实能帮助别人；以下是我的整个组件：

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

import { SpinnerService } from '../services/spinner.service';
import { switchMap, filter, map } from 'rxjs/operators';

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

  private spinnerSubscription: Subscription

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private spinnerService: SpinnerService
  ) { }

  ngOnInit() {
    this.spinnerSubscription = this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.activatedRoute),
        map(route => route.firstChild),
        switchMap(route => route.data),
        switchMap(data => {   
          if (!data.disableSpinner)
            return this.spinnerService.onLoadingChanged
          else 
            return of(false);
        })
      ).subscribe(loading => this.loading = loading);
  }

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

---

我正在努力让它发挥作用；你能编辑你的答案来展示一个完整的例子吗？

activatedRoute

似乎从未改变