以下是我的服务,我发出两个事件
dataLoaded
和loadingData
。当数据正在加载和已经加载时,我想显示和隐藏GIF图像,并在组件中捕获这两个事件并更改布尔变量的值。但是,当页面首次加载时,初始加载GIF不显示,当数据加载完成后,GIF才会出现。如果我选择搜索过滤器,则可以正常工作,而且当我调试代码时,showLoading
的值也成功更新。import { forwardRef, Injectable, EventEmitter } from '@angular/core';
import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class SearchService {
loadingData = new EventEmitter();
dataLoaded = new EventEmitter();
pages: any = {};
searchResults = [];
search() {
this.loadingData.emit("ShowLoading")
this.performSearch().then(response => {
this.searchResults = response.json();
this.pages = this.searchResults['pages'];
this.searchResults = this.searchResults['data'];
this.resultsUpdated.emit('SearchResultsUpdated');
this.dataLoaded.emit("HideLoading")
}, error => {
this.dataLoaded.emit("HideLoading")
});
}
}
组件
import { Component, ViewChild, ElementRef } from '@angular/core';
import { SearchService } from '../../search.service';
/*import {Alert} from "../../alert.component";*/
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { SavedSearchComponent } from '../saved-search/saved-search.component';
@Component({
selector: 'property-onion-search-results',
templateUrl: './search-results.component.html'
})
export class SearchResultsComponent {
@ViewChild('searchResultArea') resultsArea: ElementRef;
searchResults: any[] = null;
closeResult: string;
view = 'regular';
resultInformation: any[];
filterString: string = "";
resultCount: number = 0;
numbers: any[] = null;
showLoading;
constructor(private searchService: SearchService, private modalService: NgbModal) {
this.searchService.resultsUpdated.subscribe(data => {
this.searchResults = this.searchService.getResults();
this.filterString = this.searchService.toString();
this.resultCount = this.searchService.pages.total;
var pages = this.searchService.pages.number_of_pages;
if (this.searchService.pages.total > 25) {
this.numbers = new Array(pages).fill(1).map((x, i) => i);
} else {
this.numbers = null;
}
this.resultsArea.nativeElement.click(); // THis is a hack to fix refresh issue of this area. This area doesn't get refreshed unless you click somewhere in the browser.
});
this.searchService.loadingData.subscribe(data => {
console.log("show")
this.showLoading = true
});
this.searchService.dataLoaded.subscribe(data => {
console.log("hide")
this.showLoading = false
});
}
}
html
<img class="loading" *ngIf="showLoading" src="images/loader.gif"/>