Angular 6 navbar routerlink 重新加载组件答案

【问题标题】：Angular 6 navbar routerlink reload componentAngular 6 navbar routerlink 重新加载组件
【发布时间】：2018-09-17 09:19:00
【问题描述】：

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

【问题讨论】：

像这样使用RouterLink：[routerLink]="['/competenties/'+ competentie.id]"而不是routerlink="/competenties/{{competentie.id}}"
@ShashikantDevani，后者不是和前者一样吗？
是的，只是一种使用 routerlink 的旧方式。仍然遇到同样的问题。
这不是旧方式也不是新方式。这只是做同一件事的两种不同方式。这只是使用一个比另一个更有意义的问题。

标签： php angular routing navigation angular6

【解决方案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();
  }

}

【讨论】：

这是一个错字，但并不是我真正面临的问题。 Routerlink 工作正常，但它没有刷新组件，因此没有更新内容。
将鼠标悬停在选项上并检查它在哪里导航用户。如果可能的话，请考虑创建一个堆栈闪电战。
导航没有问题，一切正常。我唯一的问题是当我在同一个组件中时组件没有重新加载。所以我在 /details/3 中，当使用 routerLink 切换到 /details/4 时，组件不会重新加载（因为正在显示相同的组件），因此标题和描述等内容不会改变。当使用 href 而不是 routerlink 时，组件会重新加载并显示属于正确 id 的内容。
在这种情况下，您也应该发布您的路由配置和组件代码。如果没有该代码，很难弄清楚这一点。如果可能的话，最好创建一个 StackBlitz。还请查看一次更新的答案并检查是否可以解决您的问题。
用路由器、组件和服务更新了我的帖子。希望这可以帮助您了解我正在尝试做的事情。我知道我必须检查 url/路由中是否有任何事件发生变化。但我不知道如何检查并重新加载组件以查找新 ID 的内容。

【解决方案2】：

尝试以下动态路由：

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

【讨论】：

不，同样的问题。因为它加载的是同一个组件，所以它不执行 OnInit。目前唯一的修复是使用 href 但看起来不干净。

【解决方案3】：

将此添加到您的代码中：

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

【讨论】：