Angular Can'；t重新加载/刷新活动路由

我最近更新了新的RC3和Router3alpha，似乎有些事情已经改变了

我注意到，单击活动路由的链接不会再导致重新加载组件。如何使用新router3实现这种行为

我的链接看起来像

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

---

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

目前不支持此操作。如果只有参数值更改，但管线保持不变，则不会重新创建构件

另见

您可以订阅参数，以便在参数更改为重新初始化组件实例时收到通知

---

角度2 rc7-路由器3.0另请参见

---

将index.html中的基本url更改为

document.write（“”）
这是我能想出的解决这个恼人问题的最好办法：

    var currentUrl = this.router.url;
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute';
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl));

这是可行的，但它仍然是一个黑客，我讨厌
Angular
团队没有提供
reload（）
方法
在我看来，你可以在typescript中使用
window.location.reload（）
。
这种方式简单安全，因为它是浏览器功能的一部分。
从Angular 5.1开始，现在可以使用
onSameUrlNavigation
if (currentUrl.indexOf('/settings') > -1) {
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings'));
} else {
    this.router.navigate(['/settings']);
}

配置选项作为内置角度路由器的一部分。虽然从文档中看不太明显，但设置和运行起来相当简单

您需要做的第一件事是在
app.routing.ts
中设置选项（如果您有一个或配置了应用程序路由的文件）

OnNameUrlNavigation有两个可能的值
“重新加载”
或
false
。默认值为
false
，当要求路由器导航到活动路由时，不会导致任何情况发生。我们希望将此值设置为
重新加载
。值得注意的是，
reload
实际上并不执行重新加载路由的工作，它只会重新触发路由器上的事件，然后我们需要将这些事件连接到路由器上

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

要确定实际触发这些事件的时间，需要在路由上指定
runguardsandsolvers
configuration选项。这可能需要三个值

paramsChange
-仅当路由参数发生变化时才会触发，例如
/user/：id
中的id发生变化时

paramsOrQueryParamsChange
-当路由参数更改或查询参数更改时触发。e、 g.
/user/:id/invests？limit=10

始终
-导航路线时始终开火

在这种情况下，我们希望始终指定。下面显示了一个示例路线

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

繁重的工作进入了
initialiseinvests（）
方法，在该方法中，您可以将属性重置为其默认值，并从服务获取数据，以使组件返回其初始状态

您需要在每个组件上重复此模式，以便在单击时能够重新加载或通过某种形式的刷新按钮进行刷新，确保将
Runguard和Resolver
选项添加到路由文件中的每个路由。
Angular 2-4 current route reload 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]);
    });
  }

您可以将此方法附加到当前组件上的单击事件以重新加载它。
这对我很有效，取自：

现在您可以像这样使用：
this.redirectTo（this.router.url）
 如果您确实需要在每次单击routerLink时诱使路由器重新加载组件，您可以在组件中使用以下代码

构造函数（专用路由器：路由器）{
//重写路由重用策略
this.router.RouterUseStrategy.shouldReuseRoute=函数（）{
返回false；
}
this.router.events.subscribe（（evt）=>{
if（导航结束的evt实例）{
//诱使路由器相信它的最后一个链接以前没有加载
this.router.navigated=false；
//如果您需要滚动回到顶部，这里是正确的位置
滚动到（0，0）；
}
});
}

希望这有帮助
我也遇到了同样的问题，我在我的应用程序模块中使用LocationStrategy解决了这个问题。这就是我如何实现并将解决所有路由问题的方法

在
app.module.ts中


添加HashLocationStrategy和LocationStrategy

从'@angular/common'导入{HashLocationStrategy，LocationStrategy}

附加模块提供程序


Final
app.module.ts
看起来像这样

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [
                  {
                     provide: LocationStrategy, 
                     useClass: HashLocationStrategy
                  }
                ],
})

export class AppModule {}

有关更多信息，请点击以下链接
HashLocationSt


HashLocationStrategy

定位策略


注意：上述策略将在您的URL中添加我不喜欢的#。所以我用了另一种方法：

替代方法

除了使用
HashLocationStrategy
，您还可以使用
PathLocationStrategy

按照以下步骤移除#，并按照上述方法的预期工作


从
@angular/common


将提供程序中的
HashLocationStrategy
替换为
PathLocationStrategy
redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }

{
   provide: LocationStrategy,
   useClass: HashLocationStrategy
 }

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [
                  {
                     provide: LocationStrategy, 
                     useClass: HashLocationStrategy
                  }
                ],
})

export class AppModule {}

import { LocationStrategy, PathLocationStrategy } from '@angular/common';

window.location.reload();