做到Input delay，然後傳送到child component

General
1

在parent component建立一個input 讓使用者輸入後

透過keyup的方法，將資訊傳送到child component中顯示!

目前想要讓這個input不要那麼即時反應

類似這個搜尋功能

https://www.freakyjolly.com/angular-7-6-add-debounce-time-using-rxjs-6-x-x-to-optimize-search-input-for-api-results-from-server/#more-2229

網路上找了很多資料，都是說使用 debounceTime

但是找了很多天的範例，都沒有辦法正確操作成功

小弟的版本是Angular: 8.2.14

不知道有沒有比較合適的範例或者是相關的訊息

可以讓我解決問題! 謝謝

2

你的範例程式先貼出來看看吧，這樣才知道你寫的地方哪邊有問題

3

是!
我遇到的問題是這樣，我按照覺得可行的方式建立的subscribe 之後
就不知道該如何把資訊傳到child 去處理顯示

要讓輸入的input delay 1.2秒再偵測

parent_template
parent_template1156×347 15.9 KB

parent_ts
parent_ts1183×830 42.2 KB

顯示到child中

child_template
child_template1126×251 11.7 KB

再麻煩您解惑了!!!

4

你應該朝 FormControl 的方向看，當你使用 formControl 的時候，可以這樣子寫

<input [formControl]="webInput">

component.ts

webInput = new FormControl();

webInput.valueChanges.pipe(
   debounceTime(1200)
).subscribe(value=> this.values = value);
1個讚
5

有，根據您的建議，已經解決了目前的問題!!
感謝您的回答! 謝謝

6

您好
根據這個議題，我又遇到了一個問題
我在parent component要傳string資訊到service中處理
然後在另一個component中顯示

首先我在constructor中，打入您提供的程式，但我卻沒有辦法傳到service中
2019-12-10_233646

使用按鍵的方式觸發this.messageService.sendMessage是可以的
在service以及另一個component中，是這樣寫的
service
child

想知道我應該在component.ts 中，使用什麼方法，才能將訊息傳到service?
謝謝

7

subscribe 是非同步，你必須將 service 的動作放到 subscribe 裡面去處理

subscirbe(value=>{
   this.messageService.sendMessage(value);
})
1個讚
8

謝謝! 我解決了我目前遇到的問題!
但是我又遇到了新的問題…
就是在child component出現的訊息不是同步的

例如我第一筆輸入123
第二筆輸入456

但是在child component出現的第一筆是預設值
第二筆才是123
第三筆才是456

這是否就是您提到的非同步的狀態?

如果我想要達到同步，請問我該怎麼處理?
或者我該參考什麼資料呢? 謝謝您!!
:sweat_smile: