получить данные JSON по нажатию кнопки, используя обещания - PullRequest
Новая
       8

получить данные JSON по нажатию кнопки, используя обещания

0 голосов
/ 29 апреля 2018

Я получаю данные JSON, используя обещания, и это работает. Но теперь я хочу реализовать кнопку, которая снова вызывает API (каждый раз, когда вы вызываете API, вы получаете разные значения), как я могу это сделать?

цитата-provider.ts 

import { Injectable } from "@angular/core";
import { Http } from '@angular/http';
import { Quote } from './quote.model';
import 'rxjs/add/operator/map';
import { resolve } from "path";
import { reject } from "q";

@Injectable()
export class QuotesProvider {
    private quote: Quote;

    constructor(private http: Http) {
    }

    public getQuote(): Quote {
        return this.quote;
    }

    load() {
        console.log("loading data...");
        return new Promise((resolve, reject) => {
            this.http
                .get('http://quotes.stormconsultancy.co.uk/random.json')
                .map(res => res.json())
                .subscribe(response => {
                    this.quote = response;
                    console.log("loading complete");
                    resolve(true);
                })
        })
    }
}

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';


import { AppComponent } from './app.component';
import { QuoteBoxComponent } from './quote-box/quote-box.component';

import { QuotesProvider } from './quote-box/quotes-provider';
import { HttpModule } from '@angular/http';

export function quotesProviderFactory(provider: QuotesProvider) {
  return () => provider.load();
}

@NgModule({
  declarations: [
    AppComponent,
    QuoteBoxComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    QuotesProvider,
    { provide: APP_INITIALIZER, useFactory: quotesProviderFactory, deps: [QuotesProvider], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

цитата-box.component.ts 

@Component({
  selector: 'app-quote-box',
  templateUrl: './quote-box.component.html',
  styleUrls: ['./quote-box.component.css']
})
export class QuoteBoxComponent implements OnInit {
  // @HostBinding('class.quote-box') quoteBox = true;
  // http://quotes.stormconsultancy.co.uk/random.json
  quote: Quote;

  constructor(public quotesProvider: QuotesProvider) {
    this.quote = quotesProvider.getQuote();
  }

  ngOnInit() {
    console.log(this.quote.author);
  }

  // here I want to call API again
  newQuote() {
  }
}

Я следую этому уроку, чтобы сделать это https://devblog.dymel.pl/2017/10/17/angular-preload/

1 Ответ

0 голосов
/ 29 апреля 2018

Я не знаю, что именно вы хотите сделать, но если я правильно понимаю, я не знаю, почему вы делаете это таким образом. Я бы просто создал сервис, а затем внедрил бы ваши компоненты и использовал его по нажатию кнопки. Возможно, учебник немного устарел.

quotes.service.ts 

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class QuotesService {

constructor(private http: HttpClient) { }

getQuotes() {
    return this.http.get('http://quotes.stormconsultancy.co.uk/random.json', 
    httpOptions);
  }

}

Затем в вашем компоненте в методе, вызываемом по нажатию кнопки

Конструктор 

constructor(private quotesService : QuotesService) { }

В методе, вызываемом по нажатию кнопки 

this.quotesService.getQuotes().subscribe(quotes => {

     // do what you want with your qoutes
    });
...