代码之家 › 专栏 › 技术社区 › r3plica

角6显示每个部件的预紧器,除了一个

angular

1

r3plica · 技术社区 · 7 年前

所以,我有这个 纺纱机 组件声明,这只是一个简单的预加载程序CSS图形。它坐在我的身上 应用程序 组件并检查是否加载任何HTPP数据。如果是,它会显示旋转器。如果没有,则隐藏旋转器:

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

我现在有一种情况,我们不想在某个组件上显示自旋体。我确实尝试过使用URL进行此操作:

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 例如,它将显示我的预加载程序,但我不想这样做。我可以在我的 自旋体组件 对于每一个类别,但这似乎很疯狂。

我要做的是检查路由更改时解析的组件的名称,然后隐藏预加载程序(如果它与我的组件匹配)。有可能吗?

2 回复 | 直到 7 年前

1

2

Eliseo 7 年前

可以使用属性“data”将属性“nospinner”添加到不需要微调器的所有路由中。

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

如果您订阅activatedroute.data,您将得到值,如果!res.nospiner,订阅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));

2

0

r3plica 7 年前

我将进一步讨论Eliseo的答案。他所说的是对的,但这只是一个部分的回答。真正的答案是改变我的 恩贡尼特 对此:

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 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?
]

这里有一点需要注意;如果您正在使用 延迟加载 你必须确保数据对象是初始声明的一部分。我有我的 data 在我的 小部件路由模块 但它被忽视了。

我希望这能帮助别人。

PS:为了确保这确实能帮助其他人,这里是我的整个组件:

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