[ANGULAR] Udostępnienie zmiennej pomiędzy komponentami

Question

Hej,

W jaki sposób można udostępnić zmienną z komponentu do klasy service.  Chciałabym login użytkownika, który wpisuję przy logowaniu użyć w mojej klasie service. W jaki sposób można to przesłać?

Answer 1

Masz na to trzy sposoby, albo jako @Input przekazywany do komponentu, albo za pomocą zewnętrznego serwisu który możesz użyć w ramach współdzielenia czegoś pomiędzy komponentami i wstrzykiwaniem jako zależność do np. konstruktora , działającego jako dyrektywa, albo za pomocą EventEmitera działającego jako funkcja zdarzenia.  

https://angular.io/api/core/EventEmitter - EventEmitter
https://angular.io/guide/architecture-services - Serwisy
https://manivelarjunan.medium.com/event-emitter-vs-subject-cross-component-communication-8934376605e1
https://angular.io/guide/inputs-outputs - Sharing data between child and parent directives and components

Comments

Ja chciałabym tylko pobrać login, który jest wpisywany przy logowaniu i przekazać tą zmienną do ścieżki, którą mam w moim service. Bo na tą chwilę w konsoli otrzymuję błąd, że ta wartość (login) jest "undefined"

---

bez kodu Ci nie doradze.

---

W sumie teraz mam inny problem, ale może będziesz mi w stanie pomóc. Chcę przesłać dla zalogowanego użytkownika liczbę punktów jaką zdobył, ale cały czas mam taki błąd w moim Springu: "Required request parameter 'points' for method parameter type int is not present", a w konsoli mam błąd http 400.

Mój kod w Springu:

  @PostMapping("/users/{login}/points")
    public ResponseEntity<User> przeslijWynik(@PathVariable String login, @RequestParam("points") int points) {
        User user = userRepository.findByLogin(login);

        user.setPoints(points);

        userRepository.save(user);


        return ResponseEntity.ok(user);

    }

I w Angularze:

przekazWynik(user:User) {

    this.userID=this.loginUserService.login;

    return this.http.post(`${this.url}/${this.userID}/points`, {points:user.points});

   

 

  }

 

Co muszę zmienić w kodzie? 

---

Masz coś takiego @RequestParam("points") int points
Wymagasz tutaj parametru w request URL a u Ciebie przesyłasz raczej RequestBody, więc albo @RequestParams zamienisz na @RequestBody i dostosujesz, albo musisz zmodyfikować metode po stronie klienta 

Jeśli masz przekazać to tak jak u CIebie to musisz zmienić na 

@RequestBody Map<String, Integer> points  

 string to klucz : points, natomiast wartosc to user.points, innym wypadku

Druga opcja to modyfikacja rządania klienta na coś pokroju takiego : 
 

return this.http.post(`${this.url}/${this.userID}/points?points=${user.points}`, {});

można również skorzystać z klasy HttpParams, aby przesłać parametry zapytania do serwera.
 

const options = { params: new HttpParams().set('points', user.points.toString()) };

return this.http.post(`${this.url}/${this.userID}/points`, {}, options);

trzeci argument metody post() to opcjonalny obiekt HttpParams

---

Zadziałało. Dziękuję Tobie bardzo za pomoc :) :)