docs: refactor pipe example to use the HttpClient (#22741)
PR Close #22741
This commit is contained in:
parent
6a797d5401
commit
9a6d26e05b
|
@ -1,26 +1,21 @@
|
|||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import {
|
||||
FlyingHeroesComponent,
|
||||
FlyingHeroesImpureComponent
|
||||
} from './flying-heroes.component';
|
||||
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
import { FetchJsonPipe } from './fetch-json.pipe';
|
||||
import { FlyingHeroesComponent, FlyingHeroesImpureComponent } from './flying-heroes.component';
|
||||
import { FlyingHeroesImpurePipe, FlyingHeroesPipe } from './flying-heroes.pipe';
|
||||
import { HeroAsyncMessageComponent } from './hero-async-message.component';
|
||||
import { HeroBirthdayComponent } from './hero-birthday1.component';
|
||||
import { HeroBirthday2Component } from './hero-birthday2.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { PowerBoosterComponent } from './power-booster.component';
|
||||
import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
|
||||
import {
|
||||
FlyingHeroesPipe,
|
||||
FlyingHeroesImpurePipe
|
||||
} from './flying-heroes.pipe';
|
||||
import { FetchJsonPipe } from './fetch-json.pipe';
|
||||
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
import { PowerBoosterComponent } from './power-booster.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
@ -43,6 +38,6 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
|||
FetchJsonPipe,
|
||||
ExponentialStrengthPipe
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
|
@ -1,13 +1,14 @@
|
|||
// #docregion
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
// #docregion pipe-metadata
|
||||
@Pipe({
|
||||
name: 'fetch',
|
||||
pure: false
|
||||
})
|
||||
// #enddocregion pipe-metadata
|
||||
export class FetchJsonPipe implements PipeTransform {
|
||||
export class FetchJsonPipe implements PipeTransform {
|
||||
private cachedData: any = null;
|
||||
private cachedUrl = '';
|
||||
|
||||
|
@ -17,7 +18,7 @@ export class FetchJsonPipe implements PipeTransform {
|
|||
if (url !== this.cachedUrl) {
|
||||
this.cachedData = null;
|
||||
this.cachedUrl = url;
|
||||
this.http.get(url).subscribe( result => this.cachedData = result );
|
||||
this.http.get(url).subscribe(result => this.cachedData = result);
|
||||
}
|
||||
|
||||
return this.cachedData;
|
||||
|
|
Loading…
Reference in New Issue