Угловой компонент перезагрузки маршрутизатора Navbar 6

Question

Угловой компонент перезагрузки маршрутизатора Navbar 6

Я использую Angular 6 и RouterLink в выпадающем меню в моей панели навигации. Проблема, с которой я сталкиваюсь, состоит в том, что routerlink не перезагружает веб-сайт и поэтому не маршрут. При нажатии кнопки в раскрывающемся списке она изначально загружается правильно, но когда пользователь нажимает другую кнопку в раскрывающемся списке (находясь еще на другой дочерней странице раскрывающегося списка), он не перезагружает содержимое на странице, а изменяет URL-адрес. При использовании Href все загружается правильно.

<div
ngbDropdownMenu
class="dropdown-menu"aria-labelledby="navbarDropdown">
<div *ngFor="let competentie of competenties">
<a
class="dropdown-item"routerlink="/competenties/{{competentie.id}}">
{{competentie.name}}
</a>
</div>
</div>

Это вынуждает меня использовать href вместо routerlink, чтобы перезагрузить страницу, чтобы компонент перезагрузил и отобразил контент с правом {{reputationtie.id}}.

Есть ли способ перейти на другую выпадающую страницу с помощью routerlink и обновить содержимое на странице?

редактировать

Компонент детали:

export class CompetentieComponent implements OnInit {
competentie: Competentie;

constructor(private route: ActivatedRoute,
private competentieService: CompetentieService,
private location: Location
) {
}

getCompetentie(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.competentieService.getCompetentie(id)
.subscribe(competentie => this.competentie = competentie);
}

ngOnInit() {
this.getCompetentie();
}
}

Мой маршрут:

const routes: Routes = [
{path: 'competenties/:id', component: CompetentieComponent}
];

Служба получает данные из класса с массивом COMPETENTIES []:

export class CompetentieService {

getCompetenties(): Observable<Competentie[]> {
return of(COMPETENTIES);
}

getCompetentie(id: number): Observable<Competentie> {
return of(COMPETENTIES.find(competentie => competentie.id === id));
}

constructor() {}
}

0

angular angular6 navigation php routing

Решение

Другие решения

Попробуйте следующее для динамических маршрутов:

<a class="dropdown-item"  [routerLink]="['/competenties/' + competentie.id]">
{{competentie.name}}
</a>

-1

добавьте это в свой код:

<a class="dropdown-item"  [routerLink]="['/competenties/' + competentie.id]">
{{competentie.name}}
</a>

-1

Источник

Accepted Answer

Ты используешь this.route.snapshot.paramMap.get('id') который будет срабатывать только один раз. Вы должны использовать params вместо snapshot.paramMap.get('id'), params это BehaviorSubject подписавшись на который даст вам обновленный id каждый раз, когда это меняется.

Вы должны ввести ActivatedRoute в качестве зависимости в том же, а затем подписаться на params собственность на это.

export class CompetentieComponent implements OnInit {
competentie: Competentie;

constructor(private route: ActivatedRoute,
private competentieService: CompetentieService,
private location: Location
) {}

getCompetentie(): void {
this.activatedRoute.params.subscribe(params => {
let latestID = +params['id'];
this.competentieService.getCompetentie(latestID)
.subscribe(competentie => this.competentie = competentie);
});
}

ngOnInit() {
this.getCompetentie();
}

}

2