我在我的导航栏中的下拉菜单中使用角度 6 和路由器链接。我面临的问题是路由器链接没有重新加载网站,因此没有重新加载路由。当按下下拉列表中的按钮时,它最初会正确加载,但是当用户按下下拉列表中的另一个按钮时(仍在下拉列表的另一个子页面上(,它不会重新加载页面上的内容,而是更改 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 来重新加载页面,以便组件重新加载并以正确的 {{competentie.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}
];
该服务从具有数组 COMPETENCENTIES[] 的类中获取数据:
export class CompetentieService {
getCompetenties(): Observable<Competentie[]> {
return of(COMPETENTIES);
}
getCompetentie(id: number): Observable<Competentie> {
return of(COMPETENTIES.find(competentie => competentie.id === id));
}
constructor() {}
}
您正在使用只会触发一次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();
}
}
对动态路由尝试以下操作:
<a class="dropdown-item" [routerLink]="['/competenties/' + competentie.id]">
{{competentie.name}}
</a>
将其添加到您的代码中:
<a class="dropdown-item" [routerLink]="['/competenties/' + competentie.id]">
{{competentie.name}}
</a>