In the Angular tutorial here: https://stackblitz.com/angular/qmgqmlrqmye?file=src%2Fapp%2Fhero.service.ts
We have to define httpOptions outside of the exported HeroService class and heroesUrl inside of the class. Moving either one to inside or outside of the class breaks the application. What is the reason for this? How do I know which variables have to be defined inside or outside?
Code sample:
import { HttpClient, HttpHeaders } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({ providedIn: 'root' })
export class HeroService {
private heroesUrl = 'api/heroes'; // URL to web api
constructor(
private http: HttpClient,
private messageService: MessageService) { }
/** GET heroes from the server */
getHeroes (): Observable {
return this.http.get(this.heroesUrl)
.pipe(
tap(heroes => this.log(`fetched heroes`)),
catchError(this.handleError('getHeroes', []))
);
}
...
Answer
You can put either of those things inside or outside the class. I'd personally put all of those things inside of the class though since they are obviously a part of it.
Members defined inside of a class are either prefaced with private meaning they can only be referenced from within the class, public meaning you can reference them from outside of the class or without either which just means its implicitly public.
Let's take a look at how we'd move httpOptions inside the class. Since its an implementation detail that only the class needs to know about, it makes sense to define it as a private member:
private httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
}
Now, since it is a class member, in order to access it we must use this. this is just a reference to the class's context so we're saying give me the member in this class.
Anywhere you see httpOptions being referenced change it to this.httpOptions
Hope you can see how you would do it the other way around and have them defined as consts outside of the class.
No comments:
Post a Comment