Angular 2在具有不同数据的同一组件的不同实例中导航以显示

Question

我的 Angular 2 应用程序中有一个简单的侧边菜单，它显示 classRoom 的列表，每个班级 Room 都有很多用户。

我使用routerLink 在不同实例之间导航。

我的问题是当我点击第一个项目时：-class Room number 1 我没有问题并且用户列表是好的，但是当我点击 Class Room number 2 时数据没有改变，所以用户显示的是 2 号教室的用户。

如何告诉 Angular 用新数据重新渲染组件？
有什么建议吗？

更新代码示例

side-menu.component.html

<li *ngFor='let classRoom of classRooms'>
    <li>
        <a [routerLink]="['/app/users/', classRoom.name]">**Users**</a>
    </li>
    <li>....</li>
    <li>....</li>
</li>

routes.ts

....
{ path: 'app/users/:classroom', component: usersComponent},

所以当我点击“用户”链接时，我会调用用户组件，通过路由参数获取教室名称并发出获取用户的获取请求。

第一间教室没有问题，但是如果我点击第二间教室的“用户”链接，则没有任何变化。

Answer 1

我看到您正在 route.ts 中加载 userComponent。你可以试试如下：

<div class="col-md-3" *ng-for="let classRoom of classRooms">
    <a [routerLink]="['/app/users/', classRoom.name]">
       <user-component></user-component>
    </a>
</div>

Answer 2

你的 routerLink 需要一个终端路由

[routerLink]="['parent', 'child', query.id]"

为了更清楚地理解它，请参阅此帖子 see my question and answer