Angular 6 - 刷新组件

Question

我的角度页面顶部有一个搜索框，位于标题组件中。

当用户在我的搜索框中提交一个值时，我导航到搜索结果页面：

export class SearchFormComponent {

  constructor(
    private router: Router) { }


  submit(f) {
    this.router.navigateByUrl(`search?q=${f.searchTerm}`);
  }
}

这是我的结果页面：

export class SearchPageComponent implements OnInit {
  results: SearchResult[];
  loading: boolean;
  searchTerm: string;

  constructor(private route: ActivatedRoute,
  private searchService: SearchService) { }

  ngOnInit() {
    this.loading = true;
    this.searchTerm = this.route.snapshot.queryParams['q'] || '';
    window.scroll(0,0)
    this.searchService.search(this.searchTerm)
      .subscribe(
        results => {
          this.results = results;
          this.loading = false;
        },
        error => {

        },
        () => {

        }
      );
  }


}

这在第一次搜索时效果很好，但如果用户在搜索页面上并从标题再次运行搜索，则它将不起作用。 解决此问题的最佳方法是什么？

Answer 1

Angular 的路由器有一个onSameUrlNavigation事件，用于知道何时请求路由器导航到相同的 url，以便您可以手动刷新组件。

this.router.onSameUrlNavigation(()=>{
  //do your things here
})