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

问题描述

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

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>

当访问URL /时，路由器会将我重定向到/overview，然后将其加载到路由器出口中的映射. <app-list>具有可单击项的列表，这些列表触发了<app-detail>而不是应用程序组件的显示.因此，我在网址中传递引用的json文件的ID，如下所示:/details/:id(在我的路线中).

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).

以上所有方法都可以正常工作.如果现在单击列表项之一，则会显示详细信息，但是当我选择另一个列表元素时，视图不会更改为新的详细信息. URL确实发生了变化，但是内容没有被重新加载.如何实现DetailComponent的重新初始化?

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屋！