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. 在NAV的搜索栏类型 “M”。
3. 点击Bombasto。注意图片加载
4. 点击尼斯先生（没有图片）。请注意，现在没有图像（虽然这是英雄11，而我们之前有一个微调）。

Answer 1

对象是不存储搜索词框的值，它只是每个发光部分有一个keyup事件时间任何的

<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