角6导航杆再装填部件
角6导航杆再装填部件
提问于 2018-09-17 09:19:00
我在肚脐上使用角形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}显示内容。
是否有一种方法可以导航到另一个带有路由链接的下拉页面并更新页面上的内容？
编辑
详情部分：
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() {}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-17 09:21:07
您使用的是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();
}
}Stack Overflow用户
发布于 2018-09-17 09:39:47
对于动态路由，请尝试以下操作：
<a class="dropdown-item" [routerLink]="['/competenties/' + competentie.id]">
{{competentie.name}}
</a>Stack Overflow用户
发布于 2018-09-17 10:03:48
将此添加到代码中：
<a class="dropdown-item" [routerLink]="['/competenties/' + competentie.id]">
{{competentie.name}}
</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52364452
复制相关文章
相似问题
腾讯云开发者
