Question

我想显示一个加载微调器或一些带“请等待”的文本，只要它在 Angular Cli 中完成。

例如：获取引号

这是 quotes.component.html：

<div class="btn btn-primary" (click)="onGetQuotes()">Get Quotes</div>
<hr>
<app-quote *ngFor="let quote of quotes" [quote]="quote" (quoteDelete)="onDelete($event)"></app-quote>

这是 quotes.component.ts：

import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import {Quote} from "../quote.interface";
import {QuoteService} from "../quote.service";

@Component({
  selector: 'app-quotes',
  templateUrl: './quotes.component.html',
  styleUrls: ['./quotes.component.css']
})
export class QuotesComponent implements OnInit {
  quotes : Quote[];
  constructor(private quoteService:QuoteService) { }

  ngOnInit() {
  }


  onGetQuotes(){
    this.quoteService.getQuotes()
    .subscribe(
        (quotes:Quote[]) => this.quotes = quotes,
        (error:Response) =>console.log(error)
    );
  }



}

quote.service.ts：

import {Injectable} from "@angular/core";
import {Http , Response,Headers} from "@angular/http";
import 'rxjs/Rx';
import {Observable} from "rxjs";
import {AuthService} from "./auth.service";
@Injectable()
export class QuoteService {
    constructor(private http:Http, private authService:AuthService) {

    }


    getQuotes():Observable<any> {
        return this.http.get('http://localhost:8000/api/quotes')
            .map(
                (response:Response)=> {
                    return response.json().quotes;
                }
            );
    }

}

所以，我想显示一个加载页面，只要它已经完成。感谢阅读

Answer 1

在等待服务获取数据时，将布尔标志设置为true。

<div *ngIf="fetchingQuotes">please wait</div>

在你的component.ts中：

@Component({
  selector: 'app-quotes',
  templateUrl: './quotes.component.html',
  styleUrls: ['./quotes.component.css']
})
export class QuotesComponent implements OnInit {
  quotes : Quote[];
  fetchingQuotes = false;
  constructor(private quoteService:QuoteService) { }

  ngOnInit() {
  }


  onGetQuotes(){
    this.fetchingQuotes = true;
    this.quoteService.getQuotes()
    .subscribe(
        (quotes:Quote[]) => this.quotes = quotes,
        (error:Response) =>console.log(error)
        this.fetchingQuotes = false
    );
  }

}

Answer 2

在您的主html文件中，您需要保留微调器的html，以便在整个角度应用程序中的任何组件中显示它：

您还需要在app.component.ts中导入服务：

app.component.ts：

constructor(
public serviceName: ServiceName
...
)

app.component.html：

<router-outlet></router-outlet>
<div *ngIf="serviceName.showSpinner" class="spiner">
   <!-- svg or gif of spinner  -->
</div>

在你的服务中：

public showSpinner: boolean = false;

getdata() {
 // show spinner when we start making request

   this.showLoadingSpinner();
   let headers = new Headers({ 'Content-Type': 'application/json' });
   let options = new RequestOptions({ headers: headers });
   let url = servUrl+apiname; 
   return this.http.post(url, clientJson,clientJson1)
   .map((res: Response) => {
       // response received so hide spinner now
       this.hideLoadingSpinner();
      return res.json();
   });
}

showLoadingSpinner() {
  this.showSpinner = true;
}

hideLoadingSpinner() {
  this.showSpinner = false;
}

Angular Cli：在加载内容时添加按钮Spinner

2 个答案: