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()。

编辑:部署在赫鲁库上，让人们看到问题。复制：

1. 转到英雄11：的“英雄细节”页面
   • 注意旋转的svg。这是旋转img组件。当无法找到(或正在加载) img时，它默认为spinner。OnLoad将图像更改为实际图像。英雄11没有形象，所以旋转器停留(期望的效果)。

​

1. 在导航的搜索栏中输入"m“。
2. 点击庞巴斯托。注意pic负载
3. 点击尼斯先生(无图)。请注意，现在没有图像(虽然这是英雄11，我们以前有一个旋转器)。

Answer 1

主题不是存储搜索项框的值，它只是释放当前值的

<input #searchBox> 

每次都有一个按键事件。主题根本不存储上一次发射的值，所以如果要清除搜索框，就需要将输入框的值设置为'‘。例如：在英雄搜索组件中添加以下属性

@ViewChild('searchBox') searchBox: ElementRef; 

然后在gotoDetail方法中：

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

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