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

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

1 个答案: