Question

我在导航栏中的下拉菜单中使用了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() {}
}

Answer 1

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

}

Answer 2

尝试以下动态路线：

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

Answer 3

将此添加到您的代码中：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="wrapper">
  <div id="slider-range"></div>
</div>

Angular 6导航栏routerlink重新加载组件

编辑

3 个答案: