参数更改时的 Angular 2 重新加载路线 [英] Angular 2 reload route on param change

问题描述

我目前正在编写我的第一个 Angular 2 应用程序.我有一个OverviewComponent，它有以下简单的模板:

<div class="col-lg-8"><路由器插座></路由器插座>
<div class="col-lg-4"><app-list></app-list>

在访问 url / 时，我的路由器将我重定向到 /overview，然后在路由器插座中加载地图.<app-list> 有一个可点击项目的列表，它会触发 而不是应用程序组件来显示.因此，我在 url 中传递引用 json 文件的 ID，如下所示:/details/:id(在我的路线中).

以上所有工作都很好.如果我现在单击其中一个列表项，则会显示详细信息，但是当我选择另一个列表元素时，视图不会更改为新的详细信息.URL 会更改，但内容不会重新加载.如何实现 DetailComponent 的重新初始化?

解决方案

根据第一个最终版本，此问题已解决.

注意在参数改变时正确重置组件的状态

this.route.params.subscribe(params => {this.param = params['yourParam'];this.initialiseState();//这次根据新参数复位和设置});

I am currently writing my first Angular 2 Application. I have an OverviewComponent which has the following simple template:

<div class="row">
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-lg-4">
    <app-list></app-list>
  </div>
</div>

when accessing the url / my router redirects me to /overview which then loads a map within the router-outlet. The <app-list> has a list of clickable items which triggers a <app-detail> to be displayed instead of the app component. Therefor I pass the id of the referring json file in the url like that: /details/:id (in my routes).

All of the above works totally fine. If I now click on one of the list items the details are shown, BUT when I select another list element the view doesn't change to the new details. The URL does change but the content is not reloaded. How can I achieve a Reinitialization of the DetailComponent?

解决方案

As per the first final release, this is resolved.

Just pay much attention to correctly reset the state of the component when the parameter changes

this.route.params.subscribe(params => {
    this.param = params['yourParam'];
    this.initialiseState(); // reset and set based on new parameter this time
});

这篇关于参数更改时的 Angular 2 重新加载路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！