角度 6 导航栏路由器链路重新加载组件



我在我的导航栏中的下拉菜单中使用角度 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>

相关内容

  • 没有找到相关文章

最新更新