angular 2 routerLink功能两次工作

Question

在angular2 routerLink中，我使用[routerLink] =＆＃34; [＆＃39; XXXX＆＃39;，function（）]＆＃34;但是在partComponent中 功能两次工作< / EM>

app.component.ts

then

detail.component.html

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailComponent } from './detail/detail.component';
import { ListComponent } from './list/list.component';

const routes: Routes = [
  { path: 'detail/:id', component: DetailComponent},
  { path: 'list', component: ListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

detail.components.ts

<a [routerLink]="['/detail', nextInfo()]">
      下一个联系人
</a>

为什么 nextInfo（） 两次在detail.component.ts中工作。 我不知道为什么，因为它是angular2

中的一个错误

Answer 1

解决方案，使用(click)中的nextInfo（），而不是直接在routerLink中使用：

更改：

// nextInfo will be invoked by itself on each time view refreshed
<a [routerLink]="['/detail', nextInfo()]"> 
      下一个联系人
</a>

致：

<a [routeLink]=['/detail', numd] (click)="nextInfo()">
      下一个联系人
</a>

  

原因是changeDetection个周期，在您的情况下，您的功能会   每当对数据做出任何更改并反映到的时候都会调用   模板方面，为了防止应该在特定事件上触发，   在你的情况下点击它。

有关详细信息，请参阅： LifeCycleHooks

这将有助于您调试并了解流程如何。

Answer 2

它工作两次的原因是你处于开发模式。变化检测每次触发两次。在模板中调用函数不是一个好习惯，因为每次检测到更改时都会调用它们。

如果启用prod模式，它将不会触发两次。但是，我仍然会重新考虑在模板中调用函数。