Question

这让我疯了。我有一个 LoaderComponent ：

import { Component, OnInit, Renderer2 } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { LoaderService } from '../loader.service';
import { LoaderState } from '../models/loaderState.model';

@Component({
  selector: 'bz-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss']
})
export class LoaderComponent implements OnInit {
  show = false;
  private _subscription: Subscription;

  constructor(
    private _loaderService: LoaderService,
    private _renderer: Renderer2
  ) { }

  ngOnInit() {
    console.log('eh?');
    this._subscription = this._loaderService.loaderState
      .subscribe((state: LoaderState) => {
        if (state.show) {
          this._renderer.addClass(document.body, 'modal-open');
        } else {
          this._renderer.removeClass(document.body, 'modal-open');
        }
        this.show = state.show;
      });
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }
}

和 LoaderService 。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

import { LoaderState } from './models/loaderState.model';

@Injectable()
export class LoaderService {
  private loaderSubject = new Subject<LoaderState>();
  loaderState = this.loaderSubject.asObservable();

  constructor() { }

  show() {
    this.loaderSubject.next(<LoaderState>{ show: true });
  }
  hide() {   
    this.loaderSubject.next(<LoaderState>{ show: false });
  }
}

我的想法是，在请求AJAX请求时，我可以显示此组件。我的这个组件的HTML看起来像这样：

<div [class.loader-hidden]="!show">

  <div class="loader-overlay">

    <div class="panel panel-loader">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <h1>Matching your best content</h1>
            <div class="loader">
              <div class="ball-grid-beat">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

这可以通过在其他服务中调用它来实现：

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http/src/response';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/observable/throw';
import { mergeMap } from 'rxjs/operators';

import { ICampaign } from './models/campaign.model';
import { IResult } from './models/result.model';
import { LoaderService } from './loader.service';

const API_URL = environment.apiUrl;
const API_Path = '/results';

@Injectable()
export class ResultsService {
  elq: string;

  constructor(private _http: HttpClient, private _loader: LoaderService) { }

  public get(id: number): Observable<IResult> {
    this.showLoader();
    return this._http
      .get<IResult>(API_URL + API_Path + '/' + id)
      .catch(this.handleError)
      .finally(() => this.hideLoader());
  }

  private handleError(error: HttpErrorResponse) {
    return Observable.throw(error);
  }

  private showLoader(): void {
    this._loader.show();
  }
  private hideLoader(): void {
      this._loader.hide();
  }
}

LoaderComponent 实际上添加了 AppComponent ，如下所示：

<router-outlet></router-outlet>
<bz-loader></bz-loader>

到目前为止一切顺利;装载机出现在我想要的时候。现在我想在显示加载器后立即运行一些代码。所以我认为把它放在 LoaderComponent 中的ngOnInit()方法上是最好的地方，但是当我这样做时，组件会被显示，只有当组件运行时代码才会执行。我也试过其他地方。我尝试使用 ResultsService showLoader()方法，但仍然不想工作。

有人知道如何在显示加载程序后立即执行代码吗？

Angular4使用订阅

0 个答案: