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