Witam, jestem nowy na tym forum, przyszedł tutaj tylko po jedną poradę. Piszę prostą aplikację, coś na kształt księgarni, w Angularze oraz używam Firebase do zapisywania książek w bazie danych. Zrobiłem także funkcjonalność, która tworzy nową bazę danych i zapisuje te książki, które chcę zaznaczyć jako ulubione, poprzez kliknięcie w ikonkę serduszka. Tylko, że jest z tym pewien problem, otóż: ulubione książki zapisują się w bazie danych, ale po przejściu np. do koszyka zamówień i po powrocie na stronę główną, zaznaczona wcześniej ikonka serduszka znowu jest niezaznaczona. Gdy nie przechodzę na inną stronę wszystko działa jak należy: zaznaczam, książka ląduje w bazie - odznaczam, książka znika. Chciałbym uzyskać efekt, w którym ikonka będzie zaznaczona nawet po powrocie z innej podstrony, tylko nie wiem jak to zrobić. Bardzo proszę o pomoc i dziękuję za wszystkie rady ;)
Albo gdzieś w Resolverze/ngOnInit pobierasz sobie dotychczasowe polubione książki za każdym razem kiedy wyświetlasz komponent, albo sięgasz po jakąś bibliotekę do store managementu (ngrx/akita są najpopularniejsze) żeby ograniczyć liczbę requestow i zapisujesz to np resolverem do store z którego potem w komponencie pobierasz te dane.
Jeśli to jest coś testowego i nie chcesz używać wielkiej biblioteki w postaci NgRx to możesz również stworzyć sobie prosty serwis (providedIn: „root”) i w nim przechowywać pobrane dane. Jednak jeśli jest to coś co chcesz rozwijać dalej albo będzie więcej zarządzania innymi elementami to jednak lepiej będzie wykorzystać do tego NgRx Store.
Pozdrówki
P.S. Jeśli chcesz załadować dane przed przejściem do strony to lepiej wykorzystać do tego celu guardy. Jeśli coś pójdzie nie tak to w naturalny sposób możesz anulować nawigację i pozostać na aktualnej stronie.
FrontendGuy napisał(a):
Jeśli to jest coś testowego i nie chcesz używać wielkiej biblioteki w postaci NgRx to możesz również stworzyć sobie prosty serwis (providedIn: „root”) i w nim przechowywać pobrane dane. Jednak jeśli jest to coś co chcesz rozwijać dalej albo będzie więcej zarządzania innymi elementami to jednak lepiej będzie wykorzystać do tego NgRx Store.
Pozdrówki
P.S. Jeśli chcesz załadować dane przed przejściem do strony to lepiej wykorzystać do tego celu guardy. Jeśli coś pójdzie nie tak to w naturalny sposób możesz anulować nawigację i pozostać na aktualnej stronie.
Z wyświetleniem polubionych książek nie mam problemów. Chodzi mi o to, że na stronie głównej mam listę książek i do każdej strony jest dołączona ikona serduszka, favorite_border z angular material, a po dodaniu książki do ulubionych zmienia się na favorite. Zrobiłem podstronę do wyświetlania tych ulubionych książek i one się pojawiają, bo wyświetlam je z firebase. Tylko, że mam ten problem, że gdy potem wchodzę na stronę główną to ikonka zmienia się na favorite_border, nawet jak ją wcześniej zaznaczyłem.
Jeśli to jest jedyna informacja która potrzebujesz przechować podczas nawigacji to zrób sobie serwis w którym będziesz ta flagę przechowywał (ze masz coś dodane do ulubionych)
Pokaż kod, bo bez tego to ciężko cokolwiek poradzić. Prawdopodobnie nigdzie nie korzystasz z Książki i informacji o tym, że jest dodana do ulubionych, tylko na sztywno masz gdzieś ustawioną startową ikonę która się dopiero zmienia po kliknięciu.
Aisekai napisał(a):
Pokaż kod, bo bez tego to ciężko cokolwiek poradzić. Prawdopodobnie nigdzie nie korzystasz z Książki i informacji o tym, że jest dodana do ulubionych, tylko na sztywno masz gdzieś ustawioną startową ikonę która się dopiero zmienia po kliknięciu.
To jest funkcja do zmiany tej ikonki
export class BooksListComponent implements OnInit {
books: any;
constructor(private db: AngularFireDatabase) {}
ngOnInit(): void {
this.db
.list('books')
.valueChanges()
.subscribe((books) => {
this.books = books;
});
}
addToFavorite(event, item): void {
if (event.target.textContent === 'favorite_border') {
event.target.textContent = 'favorite';
this.db.object(`favorite/${item.routelink}`).set(item);
} else {
event.target.textContent = 'favorite_border';
this.db.list('favorite').remove(`${item.routelink}`);
}
}
}
A to widok w htmlu
<button (click)="addToFavorite($event, book)" mat-icon-button color="primary" aria-label="Add to favorite icon" title="Add to favorite">
<mat-icon>favorite_border</mat-icon>
</button>
Tak jak pisał @Aisekai masz na sztywno ustawiona wartosc ‚favorite-border’. Wartosc ta zmieniasz TYLKO po dodaniu do ulubionych. Po nawigacji wszystko jest odtwarzane od poczatku i dlatego masz to co masz :) poza tym serdecznie ci polecam trzymanie w komponencie strumienia z książkami a nie subskrybowania w komponencie i wyciągania ich do zmiennej. W widoku HTML użyj async pipe, to jest dobra rada na przyszłość.
FrontendGuy napisał(a):
Tak jak pisał @Aisekai masz na sztywno ustawiona wartosc ‚favorite-border’. Wartosc ta zmieniasz TYLKO po dodaniu do ulubionych. Po nawigacji wszystko jest odtwarzane od poczatku i dlatego masz to co masz :) poza tym serdecznie ci polecam trzymanie w komponencie strumienia z książkami a nie subskrybowania w komponencie i wyciągania ich do zmiennej. W widoku HTML użyj async pipe, to jest dobra rada na przyszłość.
Dzięki za rady, postaram zastosować je w przyszłości :D Rzeczywiście, wszystko się udało, jeszcze raz dziękuję za pomoc.