Angular 2重新加载routerLink用户再次单击 [英] Angular 2 reloads routerLink user clicks again

问题描述

我一直在寻找SO的解决方案，但仍然无法解决此问题.当用户单击< a> 时，他必须定向到组件WrapPost，并且WrapPost向他显示一些信息.但是，当用户第二次单击< a> 时，则什么也没有发生.如何激活多次单击 routerLink ，WrapPost每次都会更新?

I was looking for solution on SO but still don't solve this problem. When user clicks on <a> then he has to direct to component WrapPost and WrapPost shows him some information. But when user clicks on <a> second time then nothing happend. How activate multi click on routerLink and WrapPost will update everytime?

组件搜索

<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 }
];

推荐答案

您的意思是您希望每次单击链接时都刷新数据.

You mean you want to refresh data every time you click on the link.

实际上，您可以通过将服务中的数据检索脱钩并创建一个单击链接时应调用的函数(使用该服务检索数据)来做到这一点.像这样:

Actually, you can do that either by decoupling data retrieval in a service and create a function (that uses the service to retrieve data) that should be called when clicking on the link. Something like this:

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

或者您可以创建一个重定向组件，该组件的作用仅是重定向到搜索路径.像这样的东西.

Or you can create a redirect component that its role is only to redirect to the search route. Something like this.

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>

第一个建议比第二个解决方法好得多.

The first suggestion is much better than the second workaround solution.

这篇关于Angular 2重新加载routerLink用户再次单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！