触发新组件实例化或事件触发器的 Angular 2 路由我可以挂钩

Question

我的 Angular 2 站点在左栏中有一个导航栏，当用户从导航栏中选择时，我想更新中间栏中的项目列表（通过 webapi 调用）。当用户选择导航栏项目时，我希望突出显示选定的导航项目，以反映用户的选择、要更新的浏览器 URL 等。使用 OnInit 事件在第一次选择时一切正常，但即使浏览器中的 url 更新，后续选择也不会。我需要一种方法来告诉“groupItems”组件用最新的 groupId 重绘。尝试使用其他 Angular 生命周期事件没有成功。我应该如何处理这个？随后的导航栏单击重用现有实例。我的理解是，有一种方法可以在每次导航栏单击时触发“groupItems”的新实例，因为我当前的代码告诉依赖注入器在每次导航栏单击时重用相同的实例。我尝试使用更新子（中间）组件中的公共属性的单击事件处理程序，但我没有使用该方法获得我想要的导航行为（浏览器 URL、历史记录），更不用说所选组是'没有在导航栏中被选中。是的，我可以调整样式以突出显示选择，但我正在加速使用 Angular 2，并且正在询问这个问题以获取有关我正在使用的“routerLink”方法是否有任何工作机会或者是否有完全不同的指导我应该采取的方法。

<ul class='nav navbar-nav' >
   <li *ngFor="let group of groups" [routerLinkActive]="['link-active']">
       <a [routerLink]="['groupItems', group.groupId]">
            <span>{{group.keyword}}</span>
       </a>
   </li>
</ul>

Answer 1

您可以订阅组件中的路由参数。这样，每次组 ID 更改时，代码都会更新。这是一个例子：

import { ActivatedRoute } from '@angular/router';
...
   constructor(private route: ActivatedRoute) {
      this.route.paramMap.subscribe(
         params => {
            console.log(params.get('id'));
         }
      );
   }

您可以提供代码来刷新数据，而不是简单地记录新参数。

您可以在此处了解有关路由的更多信息：https://app.pluralsight.com/library/courses/angular-routing/table-of-contents