无法重新加载/刷新活动路由

Question

我最近更新到新的RC3和Router3alpha,似乎有些事情发生了变化.

我注意到单击活动路径的链接不再导致重新加载组件.如何使用新的router3实现此行为？

我的链接看起来像

<a [routerLink]="['/link1']">Link1</a>

为了测试我只是在ngOnInit中使用了一个随机数:

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

在路由之间切换时它可以正常工作,但是单击当前活动的路由不会导致组件的重新加载.

Answer 1

目前不支持此功能.如果仅参数值更改但路径保持不变,则不会重新创建组件.

另见https://github.com/angular/angular/issues/9811

您可以订阅params以在params更改为重新初始化组件实例时收到通知.

另请参见/sf/answers/2699200731/

Answer 2

从 Angular 5.1 开始，这现在可以通过使用onSameUrlNavigation 配置选项作为内置 Angular 路由器的一部分来完成。尽管从文档中并不明显，但设置和开始使用起来相当简单。

您需要做的第一件事是app.routing.ts在您的应用程序路由配置文件或文件中设置选项。

onSameUrlNavigation'reload'或有两个可能的值false。默认值是false当路由器被要求导航到活动路由时不会发生任何事情。我们想将此值设置为reload。值得注意的是reload，它实际上并没有执行重新加载路由的工作，它只是在路由器上重新触发我们需要挂钩的事件。

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
})

要确定实际触发这些事件的时间，您需要runGuardsAndResolvers在路由上指定配置选项。这可以取三个值...

paramsChange- 仅在路由参数发生变化时触发，例如 id/user/:id发生变化的地方

paramsOrQueryParamsChange- 当路由参数更改或查询参数更改时触发。例如，id或limit财产的变化/user/:id/invites?limit=10

always - 导航路线时始终触发

在这种情况下，我们希望始终指定。示例路线如下所示。

export const routes: Routes = [
  {
    path: 'invites',
    component: InviteComponent,
    children: [
      {
        path: '',
        loadChildren: './pages/invites/invites.module#InvitesModule',
      },
    ],
    canActivate: [AuthenticationGuard],
    runGuardsAndResolvers: 'always',
  }
]

那是你配置的路由器。下一步是实际处理一个组件内的事件。您需要将路由器导入到您的组件中，然后连接到事件中。在此示例中，我已连接到NavigationEnd路由器完成从一条路线到下一条路线的导航后触发的事件。由于我们配置应用程序的方式，即使您尝试导航到当前路线，它现在也会触发。

export class InviteComponent implements OnInit {
  constructor(
    // ... your declarations here
    private router: Router,
  ) {
    // subscribe to the router events
    this.router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        this.initialiseInvites();
      }
    });
  }

  initialiseInvites() {
    // Set default values and re-fetch any data you need.
  }
}

繁重的工作涉及initialiseInvites()方法，这是您将属性重置为其默认值并从服务中获取数据以使组件恢复其初始状态的地方。

您需要在希望能够在单击或通过某种形式的刷新按钮刷新时重新加载的每个组件上重复此模式，确保将runGuardsAndResolvers选项添加到路由文件中的每个路由。

Answer 3

Angular 2-4当前路由重新加载hack

对我来说,使用此方法有效:

onRefresh() {
  this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

您可以将此方法附加到当前组件上的单击事件以重新加载它.