Call app.service when reloading the page

Asked

Viewed 93 times

1

When starting the application, the function is executed first getBanners() of the service banners.service.ts and only then is the this.headers of the service app.service.ts.

If I switch pages, it works normally. The error only occurs when starting the application.

I want the banners.service.ts perform the function only after this.headers of the service app.service.ts has been amended.

banners.service.ts

getBanners(){
    return this._http.get(this.appService.endpoint + 'banners', { headers: this.appService.headers })
  .toPromise()
  .then((data) => {
    data = data.json();
    return data;
  });
}

app.service.ts

constructor() {
    this.getContentType().then(data => {
        this.headers.set('Content-Type', data);
    });
}

private getContentType(): Promise<any> {
    return 'application/json';
}
angular

2 answers

1


In Angula 2+ you don’t work in a linear way, hoping to carry this or that first... Have a shared service between all components. Within the service, declare a variable that contains the value you want to share between the components. Then use getter and Setter to assign, retrieve or modify the service variable.

Shared.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService{
    headers;

    constructor(){
      this.headers = '';
    }

    setHead(token: string){
      this.headers = new Headers({
                'Authorization': 'Bearer ' + token,
                'Content-Type': 'application/json'
            });;
    }

    getHead(){
      return new RequestOptions({ headers: this.headers });
    }
}

Add service in app.modulets. Providers:

@NgModule({
  ...
  providers: [ SharedService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

In Component. inject the service and use it to define, recover or modify the variable.

constructor(private appService: AppService) { }

  changeHead(){
    let currentUser = JSON.parse(localStorage.getItem('User'));
    this.appService.setHead(currentUser.token);
  }


getBanners(){
    return this._http.get(this.appService.endpoint + 'banners', { headers: this.appService.getHead() })
  .toPromise()
  .then((data) => {
    data = data.json();
    return data;
  });
}

  • Shouldn’t the name of Shared.service.ts and the added service in the Appmodule Provider be Sharedservice instead of Appservice? However, even changing these names, I gave a.log() console of getHead() and on header: he has only the proto

  • .....Went well???

  • It didn’t work. On the console.log(this.sharedService.getHead()) it returns me body, headers, etc., but the headers only lists the proto instead of also listing 'Content-Type' and 'Authorization'

  • Also, I currently have the getBanners() function on banners.service.ts. Is it necessary to change the code for the banners.components.ts like you did in your example? Sorry, I’m still not very familiar with Angular.

  • And the this.appService.getHead()? you have to use it. Log on it...

  • But getHead() is in Sharedservice, not Appservice...

  • What you don’t understand... The appService is in the constructor of appService, so you can use the this.appService.getHead() which belongs to Sharedservice

  • You can’t use your own service on your own constructor

  • The goal of your question is to generate a global variable, accessible to other Komponents, so the best way is this... So you don’t need to do particularly on each.

  • The function getHead() is in Sharedservice. How would you use it in Appservice without importing Sharedservice?

  • The AppService shouldn’t have a extends SharedService?

Show 6 more comments

0

You can do it by inheritance in which case the header will always be right.

@Injectable()
export class BannersService extends AppService{
   constructor() {
      super()
   }

   getBanners(){
        return this.httpClient.get(this.endpoint + 'banners', { headers: this.headers })     
    }
}

App.service.ts

constructor(private httpClient: HttpClient) {    
      this.headers.set('Content-Type', 'application/json');      
}

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.