rxjs主題 - 清除？

我跑過英雄之旅教程並改變了一下。我將搜索字段移至導航欄。在搜索時，它下拉搜索：rxjs主題 - 清除？

單擊任一組中的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，讓人們看到了問題。要複製：

去英雄11的「英雄詳細頁面：
- 注紡紗SVG。這是微調img組件。當img無法找到（或正在加載）時，它默認爲一個微調img。 OnLoad將圖像更改爲實際圖像。英雄11沒有圖像，所以微調者保持（期望的效果）。
在NAV的搜索欄類型「M」。
點擊Bombasto。注意圖片加載
點擊尼斯先生（沒有圖片）。請注意，現在沒有圖像（雖然這是英雄11，而我們之前有一個微調）。

來源

2017-04-10 Jeff

我取決於你如何以及爲什麼使用'Subject'。您可以使用您的更改進行演示嗎？ – martin

對象是不存儲搜索詞框的值，它只是每個發光部分有一個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

來源

2017-04-11 08:17:32 glendaviesnz

我使用主題的唯一原因是因爲本教程。你是說一個主題不是一般的偉大的數據模型，還是僅僅針對這個特定的用例？ – Jeff

對於簡單的初學者來說這不是問題，在開始時不需要擔心，但這是一篇很好的文章，它爲什麼不是這類問題的最佳解決方案https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93 – glendaviesnz

訪問像這樣的'nativeElement'是否有任何問題（安全或其他）？我想象沒有，因爲我的設置沒有得到？此外，這看起來似乎清除了文本框，但它使下拉打開。也許我會嘗試切換到像你說的那樣的觀察點，看看是否能解決它。 – Jeff

rxjs主題 - 清除？

回答

相關問題