在浏览器中单击后退/前进时，在 Angular 子组件中保持绑定

问题描述

我有一个搜索父级和 2 个子级搜索组件。第一个子组件只显示一个文本框和提交按钮，然后在输入搜索文本时发出一个事件。第二个子组件显示结果。父组件获取搜索文本并调用搜索服务。也可以通过查询参数从应用程序中的其他路由器链接启动搜索。 http://www.example.com/search?s=foobar

父搜索视图

<!-- child component 1 -->
<searchBox (search)="onSearchTextEntered($event)" [searchText]="this.searchText"></searchBox>
<!-- child component 2 -->
<searchResults [results]="this.searchResults"></searchResults>

父搜索组件

...
  // This caters for searches initiated via query params
  ngOnInit() {

    this.searchText = this.activatedRoute.snapshot.queryParams.s;

    if (this.searchText) {
      this.executeSearch(this.searchText);
    }  
 }
  
  // This caters for searches initiated from child component 1 
   onSearchTextEntered(searchText: string) {

    window.history.pushState({},'',`/search?s=${searchText}`);

    this.executeSearch(searchTet);
  }

当您单击后退或前进时会出现问题，因为在这些情况下不会调用 ngOnInit() 并且父组件不会显示任何新结果。

我通过将以下内容添加到 ngOnInit() 来解决这个问题

this.navSubscription = this.router.events.subscribe((e: any) => {
      if (e instanceof NavigationEnd) {
        this.searchText = this.activatedRoute.snapshot.queryParams.s;
        this.executeSearch(this.searchText);
      }
    });

问题

现在将使用后退/前进获取 searchText 并且搜索结果将得到更新，但与第一个子组件的绑定未得到反映，因此文本框永远不会使用查询参数中显示的 searchText 进行更新。假设您搜索了“a”，然后是“b”，最后是“c”。单击后退或前进将更改 url，页面上将显示正确的结果，但文本框将保留上次输入的文本，在本例中为“c”

感觉我处理这个问题的方式不对，是否有一种既定的模式来处理这样的问题，或者可能有一些可以帮助这里的事件？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）