Angular - router

Cześć, w mojej apce, w pliku .html mam listę, którą tworzę za pomocą *ngFor i tablicy obiektów, w której każdy obiekt ma id, nazwę itd.. Chciałbym po kliknięciu w dowolny element z listy przejśc na podstronę np. news/2, albo news/2137.

app-routing-module.ts :

const appRoutes = [
    { path: 'news', component: NewsComponent, children: [
       { path: ':id', component: NewsDetailComponent }
] },
]

W moim komponencie próbowałem na clicka elementu z listy wywołać metodę, która by jakoś zmuszała dodanie id do url, ale chyba coś robię nie tak. Czy ktoś mógłby pomóc, najlepiej z wyjaśnieniem?

Nawigujesz zupełnie tak samo, jakbyś nawigował mając statyczną ścieżkę. Albo wstrzykujesz Router w Komponencie i jako argument metody którą masz podpiętą pod (click) przekazujesz id obiektu w *ngFor. Możesz to samo zrobić z [routerLink]=['/news', 'id']. Pokaż tą metodę którą próbowałeś dodać.

Aisekai napisał(a):

Nawigujesz zupełnie tak samo, jakbyś nawigował mając statyczną ścieżkę. Albo wstrzykujesz Router w Komponencie i jako argument metody którą masz podpiętą pod (click) przekazujesz id obiektu w *ngFor. Możesz to samo zrobić z [routerLink]=['/news', 'id']. Pokaż tą metodę którą próbowałeś dodać.

No właśnie to jest złe rozwiązanie tego problemu. Dodałem router do komponentu i próbowałem dostać się na childa prze metodę navigate, jednak nie zmieniałem widoku na innym komponent a jedynie zmieniał się adres url, jednak problem leżał w tym, że każdy child route musi mieć swój własny router-outlet (przynajmniej z tego co doczytałem), więc rozwiązaniem było przeniesienie routa z :id z tablicy children do osobnego obiektu tablicy routingu.

Jest to poprawme rozwiązanie, ponieważ komponent który zostaje wyrenderowany za pomocą <router-outlet> nie jest niszczony w przypadku gdy zmiana route nie zmienia dopasowania. Nawigujesz dokładnie tak samo, tylko wtedy nie korzystasz z ActivatedRoute.snapshot.params do pobierania parametrów, tylko z ActivatedRoute.params który zwraca Ci Observable (będzie wywoływać twój callback, za każdym razem kiedy się wartość parametrów zmieni). Dokladnie tak samo robisz z QueryParams. Oczywiście i tak potrzebujesz na początku pobrać ze snapshota, żebyś nie dostał jakiegoś "cannot read property of undefined" błędne dane. Więc zarówno musisz wykorzystać params jak i snapshot.params. Tylko to tak jak zdążyłeś się zorientować. Jeżeli route jest children-routem to parent musi mieć swojego <router-outlet>.