cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: refactor pipe example to use the HttpClient (#22741)

Browse Source 
PR Close #22741
This commit is contained in:
Daniel 2018-07-25 12:12:40 +02:00 committed by Igor Minar
parent 317c7087c5
commit f5e18029fa
2 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
aio/content/examples/pipes/src/app/app.module.ts
View File

@ -1,26 +1,21 @@
// #docregion // #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; 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 { AppComponent } from './app.component';
import { import { ExponentialStrengthPipe } from './exponential-strength.pipe';
FlyingHeroesComponent, import { FetchJsonPipe } from './fetch-json.pipe';
FlyingHeroesImpureComponent import { FlyingHeroesComponent, FlyingHeroesImpureComponent } from './flying-heroes.component';
} from './flying-heroes.component'; import { FlyingHeroesImpurePipe, FlyingHeroesPipe } from './flying-heroes.pipe';
import { HeroAsyncMessageComponent } from './hero-async-message.component'; import { HeroAsyncMessageComponent } from './hero-async-message.component';
import { HeroBirthdayComponent } from './hero-birthday1.component'; import { HeroBirthdayComponent } from './hero-birthday1.component';
import { HeroBirthday2Component } from './hero-birthday2.component'; import { HeroBirthday2Component } from './hero-birthday2.component';
import { HeroListComponent } from './hero-list.component'; import { HeroListComponent } from './hero-list.component';
import { PowerBoosterComponent } from './power-booster.component';
import { PowerBoostCalculatorComponent } from './power-boost-calculator.component'; import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
import { import { PowerBoosterComponent } from './power-booster.component';
FlyingHeroesPipe,
FlyingHeroesImpurePipe
} from './flying-heroes.pipe';
import { FetchJsonPipe } from './fetch-json.pipe';
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
@NgModule({ @NgModule({
imports: [ imports: [
@ -43,6 +38,6 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
FetchJsonPipe, FetchJsonPipe,
ExponentialStrengthPipe ExponentialStrengthPipe
], ],
bootstrap: [ AppComponent ] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }

5
aio/content/examples/pipes/src/app/fetch-json.pipe.ts
View File

@ -1,6 +1,7 @@
// #docregion // #docregion
import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';
// #docregion pipe-metadata // #docregion pipe-metadata
@Pipe({ @Pipe({
name: 'fetch', name: 'fetch',
@ -17,7 +18,7 @@ export class FetchJsonPipe implements PipeTransform {
if (url !== this.cachedUrl) { if (url !== this.cachedUrl) {
this.cachedData = null; this.cachedData = null;
this.cachedUrl = url; this.cachedUrl = url;
this.http.get(url).subscribe( result => this.cachedData = result ); this.http.get(url).subscribe(result => this.cachedData = result);
} }
return this.cachedData; return this.cachedData;