如何在访问范围变量之前正确地进行ajax调用，并在angular2中加载到模板中并缓存它？

Question

I have the following issue. I have an issue with my component that is loaded after a route:

/myroute/:id

The problem is I have a function in it, that is used by the template to render:

constructor(appState: AppState) {
}

ngOnInit() {
  // this retrieves an object that contains multiple ids (unless its already cached)
  if(!this.appState.state.cache || this.appState.state.id != <want to check against url parameter id to see if it had already been requested before/I alreadty have data for it. if I move this under the .subscribe in the block below, does this defeat the purpose of asynchronicity? should i be using observables instead somehow?>)
  this.asyncDataWithWebpack();

  // Purpose of this block is to just get the id from the route parameters
  this.route.params
    .subscribe((params: Params) => { 
          this.setSpecificDataRelated(params['id']);
     });

}

// this function pulls in the data that contains an object that 'id' can be matched to. I consider this a rest call to some data.
  private asyncDataWithWebpack() {
    setTimeout(() => {

      System.import('../../assets/mock-data/mock-data.json')
        .then((json) => {
          this.arrayOfDataWithManyIds = json;
        });

    });
  }


    setSpecificDataRelatedToId(id) {
       this.nestedArrayBasedOnOneId = this.arrayOfDataWithManyIds[id].nestedArray;
       this.appState.set("cache", this.arrayOfDataWithManyIds);
       this.appState.set("cacheId", Id);
    }

In my template I have:

<div *ngFor="entry of nestedArrayBasedOnOneId">
  {{entry.name}}
</div>

I am getting errors I think because arrayOfDataWithManyIds does not exist because it is async. What is the best way to handle this sort of situation?

I want to make sure:

1. Performance is good, it fetches the data, then make sure that I can access the setSpecificDataRelatedToId(id) function after data actually ocmes back.

2. I don't want it such that every time I go to the route, it will have to keep requesting for data, instead, because it's pulled it in once, it should 'cache' and use that cached object without having to go back to the server all the time (unless the id changes).

Right now I am using appState only global to application (no Rxjs or any stores), but am looking for the best way to go about handling this. Is this a problem that requires only observables can handle elegantly?

Am looking for a good solution/best practice to address this. I am worried about making bad code as I want to propogate this model throughout multiple components in my application.

Answer 1

Right now I am using appState only global to application (no Rxjs or any stores), but am looking for the best way to go about handling this. Is this a problem that requires only observables can handle elegantly?

1) You do not need any store to handle this (like ngrx with a Redux approach) here to achieve what you want. (even tho it would play really well with it) .

2) Yes, observables will help to handle this in a good way but as always, you don't have to use them. (you should definitely use observables tho, it's really awesome) .

3) The problem here is more an architecture problem and I'll guide you step by step to have an optimized and well designed solution without having to cache anything .

The example I made to match (as close as I understand) your problem, is the following :

• Display a list of person
  

• When you click on a person, fetch his details
  ( little bonus : Show a loading indicator while retrieving data )
  

• Once the details are fetched, display them
  ( notice that a user has an array of dogs in order to simulate your nested array )
  

If you want to try a live demo, here's a Plunkr :
http://plnkr.co/edit/f1hxU5EWIxxskPqc93RV?p=preview

---

Now let's get back to the code, shall we ? (I'll explain piece by piece why and how I built the app)

First of all, let's gear up for our reactive application ! We have to add few RxJs operators that we'll be using. Let's add them into src/main.ts :

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/of';

If you're not familiar with RxJs yet, I'd recommend you to :
1) Read https://www.learnrxjs.io/operators
2) Play with http://rxmarbles.com
3) Go to official documentation with marble diagrams : http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

Then, in your simple App component, define some people :

  public people = [
    {id: 'persId0', name: 'Person 0'},
    {id: 'persId1', name: 'Person 1'},
    {id: 'persId2', name: 'Person 2'}
  ];

In the template, show them with a link to /people/:id :

  <div *ngFor="let person of people">
    <a [routerLink]="['/people', person.id]">{{ person.name }}</a>
  </div>

To make this work, you'll have to import the RouterModule from @angular/router and add it to AppModule , into the imports array.

Instead of simply importing the RouterModule, we'd like to define the route we were talking about : /people/:id .

So our imports array should now look like that :

  imports: [
    BrowserModule,
    RouterModule.forRoot({
      path: 'people/:id',
      component: PersonComponent
    })
  ]

Yes ! We want to display a PersonComponent when we reach that route, but we haven't defined it yet and we'll get back to it in a sec. But let's define our service to retrieve a person first :

src/people.service.ts :

import {Injectable} from '@angular/core'
import {Observable} from 'rxjs/Observable'

@Injectable()
export class PeopleService {
  // raw data to simulate your database on backend
  private people = {
    persId0: {
      id: 'persId0',
      name: 'Person 0', 
      weightKg: 60.8,
      heightCm: 183,
      dogs: [
        {id: 'dogId 0', name: 'Dog 0'},
        {id: 'dogId 1', name: 'Dog 1'}
      ]
    },
    persId1: {
      id: 'persId1',
      name: 'Person 1', 
      weightKg: 65.3,
      heightCm: 165,
      dogs: [
        {id: 'dogId 2', name: 'Dog 2'},
        {id: 'dogId 3', name: 'Dog 3'}
      ]
    },
    persId2: {
      id: 'persId2',
      name: 'Person 2', 
      weightKg: 77.6,
      heightCm: 192,
      dogs: [
        {id: 'dogId 2', name: 'Dog 2'},
        {id: 'dogId 2', name: 'Dog 2'}
      ]
    }
  };

  constructor() { }

  getPersonDetails(personId: string) {
    console.warn(`Calling the service to fetch the details a the person with ID : ${personId}`);

    // here, you may want to read your JSON file but avoid using setTimeout in such a case
    // and prefer Observable.of to wrap your data in a stream and use the delay operator to 
    // simulate network latency
    return Observable
      .of(this.people[personId])
      .delay(10000);
  }
}

As you can see, I mocked the network call by using Observable.of(...).delay() . And here, you might just replace it in production with a real HTTP request. But that's another topic.

Don't forget to declare the service into the AppModule with : providers: [PeopleService] .

Now that we can fetch our person details, let's create a component to display them :
(enough comments in code so I won't have to add anything here)

src/person.component.ts :

import {Component, OnInit} from '@angular/core'
import {ActivatedRoute} from '@angular/router'
import {Observable} from 'rxjs/Observable'
import {PeopleService} from 'src/people.service'

@Component({
  selector: 'app-person',
  template: `
    <hr>

    <p *ngIf="isLoading">Loading ...</p>

    <!-- use the new syntax with "as" to save the observable result and re-use it accross the template -->
    <div *ngIf="personWithDetails$ | async as personWithDetails">
      <p>
        <b>{{ personWithDetails.name }}</b> is <b>{{ personWithDetails.heightCm }}</b>cm tall and weight <b>{{ personWithDetails.weightKg }}kg</b>
      </p>

      <div>
        <p>He/she also has {{ personWithDetails.dogs.length }} dogs :</p>
        <ul>
          <li *ngFor="let dog of personWithDetails.dogs">{{ dog.name }}</li>
        </ul>
      </div>
    </div>
  `
})
export class PersonComponent implements OnInit {
  // will be fetched from the service
  public personWithDetails$: Observable<any>;
  public isLoading: boolean;

  constructor(private route: ActivatedRoute, private peopleService: PeopleService) { }

  ngOnInit() {
    this.personWithDetails$ = this
      .route
      // every time the route params changes ...
      .params
      // pick only the id ...
      .map(params => params['id'])
      // and set a variable isLoading to true so we can display a spinner or some text into the view
      .do(x => this.isLoading = true)
      // use switchMap to auto-magically subscribe/unsubscribe from the service call
      .switchMap(personId => this
        .peopleService
        // this is the last function returning something and thus, it'll be that return saved in personWithDetails$
        .getPersonDetails(personId)
        // simply set the isLoading variable to false so we can hide/remove our spinner or text
        .do(x => this.isLoading = false));
  }
}

I think we've been through the whole app and I hope it was helpful. Also, few things to notice :

• As we're using switchMap , previous not ended service calls are canceled and if you click on another person while it's still fetching the data, you'll not see intermediate response (as we're not interested in them anymore)
• I put a console.warn into the service every time the service method getPersonDetails is called so you can see that we don't need any cache system here to avoid calling that method (unless the URL param :id changes)

Cheers !

Answer 2

How about this, nest your method after data is back.

ngOnInit() {
    let that = this;
    // this retrieves an object that contains multiple ids
    this.asyncDataWithWebpack(() => {
        // Purpose of this block is to just get the id from the route parameters
        that.route.params
            .subscribe((params: Params) => {
                that.setSpecificDataRelated(id);
            });
    });

}

// this function pulls in the data that contains an object that 'id' can be matched to. I consider this a rest call to some data.
private asyncDataWithWebpack(execAfter:any) {
    if (this.arrayOfDataWithManyIds && ... ){ // you may add your cache logic here 
        execAfter();
    } else {
        setTimeout(() => {
            System.import('../../assets/mock-data/mock-data.json')
                .then((json) => {
                    this.arrayOfDataWithManyIds = json;
                    execAfter();
                });
        });
    }
}

setSpecificDataRelatedToId(id) {
    this.nestedArrayBasedOnOneId = this.arrayOfDataWithManyIds[id].nestedArray;
}

Answer 3

I think @maxime has the right of it. But, for a quick fix, make nestedArrayBasedOnOneId observable:

In your header:

import { Subject } from 'rxjs/Rx';

In your component:

private nestedArrayBasedOnOneId = new Subject();

In setSpecificDataRelatedToId(id) :

private setSpecificDataRelatedToId(id) { this.nestedArrayBasedOnOneId.next(this.arrayOfDataWithManyIds[id].nestedArray); this.appState.set("cache", this.arrayOfDataWithManyIds); this.appState.set("cacheId", Id); }

In your template:

<div *ngFor="entry of nestedArrayBasedOnOneId | async"> {{entry.name}} </div>

When you do it this way, nestedArrayBasedOnOneId is not undefined when your template is evaluated; it's a Subject that hasn't emitted a value yet. The Async pipe subscribes to nestedArrayBasedOnOneId and sits around waiting for a value. When setSpecificDataRelatedToId gets called, it instructs the nestedArrayBasedOnOneId to emit a value (the nestedArray ), provoking the template to update.

If I have one thing to nag about @maxime's approach, it's just that they're not using the new *ngElse in Angular 4.0 for the loading indicator. *shrug*

Answer 4

I think this is a case of using Route Resolvers. They help you resolve data based on route parameters before the Component is rendered.

I included all logic in the Resolve Service but the logic should probably be in your ApiService Class later.

You even can catch fetching errors in the Resolve Service and do a redirect if you like.

Based on your sample this could look like this:

blah.resolver.ts

@Injectable()
export class BlahResolve implements Resolve<any[]> {
    private cache: any[];

    resolve(route: ActivatedRouteSnapshot) {
        let id = route.paramMap.get('id');

        if (this.cache && this.cache[id]) {
           return Observable.of(this.cache[id].nestedArray);
        }

        return Observable.create((observer) => {
            System.import('../../assets/mock-data/mock-data.json')
            .then((json) => {
                this.cache[id] = json;
                observer.next(this.cache[id].nestedArray);
                observer.complete();
             });
        });
    }
}

my.component.ts

ngOnInit() {
   this.nestedArrayBasedOnOneId = this.route.snapshot.data.nestedData;
}

the name of the data (in our case nestedData ) is specified in the routing definition.

routing.ts

{
    path: 'myroute/:id',
    component: MyComponent,
    resolve: {
        nestedData: BlahResolve
    }
},

Disclaimer: I did not actually test the code here, but it should work, maybe with minor necessary changes. For example i normally Resolve to an actual object not an array of objects. Like Resolve<Person> and then call for example person.contacts in my Component.

Also depending on how long the actual resolving takes, for the user it could look like nothing happens, so make sure you actually show the user that something actually happens in the background :)