Question

我一直在寻找SO的解决方案，但仍然没有解决这个问题。当用户点击<a>时，他必须指向组件WrapPost并且WrapPost向他显示一些信息。但是当用户第二次点击routerLink时，没有任何事情发生。如何激活多次点击<div class="formShell"> <a class="aSearch" [routerLink]="['/search']" [queryParams]="{category: selectedCategory, search: searchForm.value}"> <input class="searchForm" placeholder="..." #searchForm> </div>并且每次都会更新WrapPost？

组件搜索

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

路线

...

foreach ($keywords as $key => $keyword) {
    $keyword = strtolower($keyword);
    $where .= " LOWER(`keywords`) LIKE '%$keyword%'";
    if ($key != ($total_keywords -1)) {
        $where .= " AND ";
    }
}

Answer 1

您的意思是每次点击链接时都要刷新数据。

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

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

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

Answer 2

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

所以我只会说代码。

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

Answer 3

我将问题redersict解析为具有Error的组件path '**'，并使用setTimeout返回到组件WrapPost。

看看这个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));

}

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

3 个答案: