angular - rxjs 主题 - 清楚吗？

Question

我浏览了《英雄之旅》教程并进行了一些更改。我将搜索字段移至导航栏。在搜索时，它会进行下拉搜索:

点击组中的任何li 将导航到每个英雄的详细信息页面。我遇到的问题是导航没有清除搜索词。这是我当前的功能:

export class HeroSearchComponent implements OnInit {
  heroes: Observable<Hero[]>;
  private searchTerms = new Subject<string>();
 ...
  gotoDetail(hero: Hero): void {
    let link = ['/detail', hero.id];
    this.router.navigate(link);
  }

我的想法是，如果存在这样的方法，我可以调用 this.searchTerms.clear()，但我对 rxjs 主题不太熟悉。我也可以重新初始化它:

this.searchTerms = new Subject<string>();

但这不会在我每次搜索时创建一个新对象吗？解决这个问题的最佳方法是什么？

此外，我不确定这个导航是否有效。当我以这种方式导航时，它似乎没有使用子组件中的 @Input()。

编辑:部署于 heroku让人们看到这个问题。复制:

1. 转到英雄 11 的“英雄详细信息”页面:
   • 注意旋转的 svg。这是旋转器 img 组件。当找不到(或正在加载)img 时，它默认为微调器 img。 OnLoad 将图像更改为实际图像。英雄 11 没有图像，因此微调器保持不变(期望的效果)。
2. 在导航栏的搜索栏中输入“m”。
3. 点击 Bombasto。注意图片加载
4. 点击 Nice 先生(无图片)。请注意，现在没有图像(尽管这是英雄 11，之前我们有一个旋转器)。

Answer 1

Subject 不存储搜索词框的值，它只是发出

的当前值

<input #searchBox> 

是每次有一个 keyup 事件。 Subject 根本不存储最后一次发射的值，所以如果你想清除搜索框，只需将输入框的值设置为 '' 即可。例如。在你的英雄搜索组件中添加以下属性

@ViewChild('searchBox') searchBox: ElementRef; 

然后在 gotoDetail 方法中:

gotoDetail(hero: Hero): void {
    this.searchBox.nativeElement.value = '';
    let link = ['/detail', hero.id];
    this.router.navigate(link);
}

为此使用 Subject 不是推荐的方法，但对于初学者来说没问题。更好的方法是直接从 DOM 元素上的 keyup 事件创建一个 Observable - 这里有一个这种方法的例子 - https://github.com/Reactive-Extensions/RxJS/blob/master/examples/autocomplete/autocomplete.js