时间戳

首页 > 解决方案 > Angular 6 navbar routerlink 重新加载组件

php - Angular 6 navbar routerlink 重新加载组件

问题描述

我在导航栏的下拉菜单中使用 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 来重新加载页面，以便组件重新加载并显示具有正确 {{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}
];

该服务从具有数组 COMPETENTIES[] 的类中获取数据：

export class CompetentieService {

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

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

constructor() {}
}

标签： phpangularroutingnavigationangular6

解决方案

您正在使用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();
  }

}

推荐阅读