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以获得通知。

另见https://stackoverflow.com/a/38560010/217408

Answer 2

Angular 2-4当前路线重装黑客

对我来说，使用这种方法有效：

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

Answer 3

从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 - 仅在路线参数更改时触发，例如/user/:id中的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 4

对于Angular 2 rc7 - 路由器3.0

将index.html中的基本网址更改为<script>document.write('<base href="/" />');</script>

Answer 5

这对我有用，摘自this：

redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }

现在您可以使用：this.redirectTo(this.router.url);

Answer 6

这是我能够解决这个烦人问题的最好的黑客攻击：

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

这有效，但它仍然是一个黑客，我讨厌Angular团队没有提供reload()方法

Answer 7

if (currentUrl.indexOf('/settings') > -1) {
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings'));
} else {
    this.router.navigate(['/settings']);
}

Answer 8

如果您确实需要诱骗路由器在每个routerLink单击上重新加载组件，则可以在组件中使用以下代码

构造函数（专用路由器：路由器）{ //覆盖路由重用策略 this.router.routeReuseStrategy.shouldReuseRoute = function（）{ 返回false； }

 this.router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
       // trick the Router into believing it's last link wasn't previously loaded
       this.router.navigated = false;
       // if you need to scroll back to top, here is the right place
       window.scrollTo(0, 0);
    }
});

} 希望这会有所帮助

Answer 9

我遇到了同样的问题，并在我的应用模块中使用了LocationStrategy解决了这个问题。这就是我的实现方式，它将解决所有路由问题。

在app.module.ts

添加HashLocationStrategy和LocationStrategy

import { HashLocationStrategy, LocationStrategy } from '@angular/common';
添加NgModule提供程序

{
   provide: LocationStrategy,
   useClass: HashLocationStrategy
 }

最终 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 https://angular.io/api/common/HashLocationStrategy
LocationStrategy https://angular.io/api/common/LocationStrategy

注意：以上策略将在您不喜欢的URL中添加＃。所以我使用了替代方法：

替代方法

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

请按照以下步骤操作，该操作将删除＃并按照上述方法正常运行

从@angular/common

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

在提供程序中将HashLocationStrategy替换为PathLocationStrategy
确保您的index.html具有基本href，如下所示。

<base href="/">

Answer 10

JavaScript location 对象公开一个 reload 成员，该成员具有一个名为 window.location.reload(); 的函数。

使用，

location = os.path.join(subdir, file)

参考： https://www.w3schools.com/jsref/met_loc_reload.asp

Answer 11

在我的谦虚意见中，你可以在打字稿中使用window.location.reload()。这种方式既简单又安全，因为它是浏览器功能的一部分。

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

11 个答案: