Angular 2重新加载routerLink用户再次点击

问题描述：

我一直在寻找解决方案，但仍然没有解决这个问题。当用户点击<a>时，他必须指向组件WrapPost并且WrapPost向他显示一些信息。但是当用户第二次点击<a>则没有任何事情发生。如何激活多点击routerLink和WrapPost会每次更新？Angular 2重新加载routerLink用户再次点击

元器件搜索

<div class="formShell"> 
    <a class="aSearch" [routerLink]="['/search']" 
     [queryParams]="{category: selectedCategory, search: searchForm.value}"> 
    <input class="searchForm" placeholder="..." #searchForm> 
</div>

路线

const appRoutes: Routes = [ 
    { path: '', component: Home }, 
    { path: 'search', component: WrapPost}, 
    { path: 'login', component: Login }, 
    { path: '**', component: Error } 
];

的[角2 - 刷新组件时routerLink再次点击]可能的复制（http://stackoverflow.com/questions/37645368/angular-2-reload-component-when-routerlink-clicked-again） –

答

你的意思是你想你点击链接，每次刷新数据。

实际上，您可以通过在服务中解耦数据检索并创建一个在点击链接时应该调用的函数（使用服务来检索数据）来实现。事情是这样的：

<a role="button" (click)="reloadData()"></a>

或者你可以创建一个重定向组件，它的作用只是用来重定向到搜索路径。像这样的东西。

import {Component, OnInit} from "@angular/core"; 
import {Router} from "@angular/router"; 

@Component({ 
    selector: 'redirect', 
    template: '' 
}) 
export class RedirectComponent implements OnInit { 

    constructor(private router: Router) { 
    } 

    ngOnInit() { 
     this.router.navigate(['/search']); 
    } 

}

，并添加路径

const appRoutes: Routes = [ 
    // other routes 
    { path: 'redirect', component: RedirectComponent}, 
];

和链接会是这样<a routerLink="/redirect"></a>

第一个建议是比第二个解决方法的解决方案要好得多。

谢谢我解决这个问题。 – Lestoroer

答

我解决了我的问题rederict组件Error有path '**'并返回到组件WrapPost与setTimeout。

看看这个skipLocationChange它不保存历史记录（真正必要的参数）。

感谢这个帖子Angular 2 - Reload component when routerLink clicked again尤其jigar gala

HTML

<a class="aSearch" (click)="changeRoute('/search', searchForm.value)"></a>

元器件搜索

changeRoute(routeValue, searchForm) { 
    this.router.navigate(['**'], {skipLocationChange: true}); 
    setTimeout(function(){ 
     this.router.navigate([routeValue], 
      {queryParams: {category: this.selectedCategory, search: searchForm}} 
     ); 
    }.bind(this)); 

}

答

我很抱歉，但我不会说英语。

所以我只会说代码。

reload(link:string){ 
    this._router.navigate(['/'], {skipLocationChange: true}) 
     .then(() => { this._router.navigate([link]); }); 
}

Angular 2重新加载routerLink用户再次点击

相关推荐