[S02E10][新手村] TODO實作(3)

讀書會
1

錄影檔:

實作的程式碼

2個讚
2

這個重構太威了！！:star_struck::star_struck::star_struck:

3

現在才看了這支影片，還可以問問題嗎 ?
平常都只有自己在寫 Angular ，看看外面的實作，收穫好多!!

Service的職責：
a.屬於Component的服務 -> 幫忙處理資料，回傳Observable給元件使用，讓Component就純粹做與Template互動這件事
b.屬於Sub Module的服務 -> 讓旗下Component互相溝通 或 讓旗下Component取得共用的Observable
c.屬於app Module的服務 -> 讓旗下Module的Component可以跨域溝通 或 純粹向下提供服務

請問Service的職責大概是這樣做區分嗎? 看影片前，我的Service只有用在 b. c.

關於Component取得Oservable，曾經有遇過一個問題，
我的Template有好幾個地方需要對那個Oservable做async pipe(大概10幾個)，跑起來有點卡，
最後是做成在Component做Subscribe然後存給變數，變數再給template，
所以想說，async pipe雖然方便，但subscribe本身是不是一個高效費的做法。

4

如果能提供範例程式，比較能針對你的問題做回答，可以將部分的程式碼放到 https://stackblitz.com/ 上，直接看程式碼作回答會更精準

5

回去看一下之前的 Code，會遇到是因為我重複好幾次的後端請求，一個 subscribe 就做一次 HTTP request
沒先回去看就發問，抱歉 Orz

不過還是問一下相關的問題，項目多的時候，一般來說會這樣寫呢

hello.component.html

<div  [class.active]="(helloService.type$ | async) === 'A'">A</div>
<div  [class.active]="(helloService.type$ | async) === 'B'">B</div>
<div  [class.active]="(helloService.type$ | async) === 'C'">C</div>
<div  [class.active]="(helloService.type$ | async) === 'D'">D</div>
<div  [class.active]="(helloService.type$ | async) === 'E'">E</div>

還是這樣

hello.component.html

<div  [class.active]="type === 'A'">A</div>
<div  [class.active]="type === 'B'">B</div>
<div  [class.active]="type === 'C'">C</div>
<div  [class.active]="type === 'D'">D</div>
<div  [class.active]="type === 'E'">E</div>
6

其實我兩種都能接受，只是有一個小問題，為什麼 hellowService.type$ 要用 observable 呢?
看起來使用一般的屬性參數即可

7

因為用了
ChangeDetectionStrategy.OnPush

因為各元件 input 去接值，我這裡寫起來比較亂，也不太喜歡使用 this.cd.markForCheck();
所以就用了 observable 讓各元件去接了

8

感覺還是怪怪的，使用 Input + OnPush 跟 service 有沒有使用 markForCheck 沒有直接的關係吧，除非你塞給 Input 的值是 Observable 才會有 markForCheck 的問題

1個讚
9

我又再回去理解一次ChangeDetectionStrategy，的確認知有誤解!
然後 hellowService.type$ 真的也不需要這樣寫 Orz

謝謝kevin的提醒!