請問如何在 service 裡去控制 DOM ?

#1

我有一個 用 div 做的 區域要當作 pop-up 顯示訊息用。
平常是隱藏。要顯示訊息的時候,就開啟。
我在 Google 李有找到兩種操作方式:

  1. 用 *ngIf 去控制 div的開啟與關閉。但這作法速度稍慢。
  2. 去控制 div 的 style.display

因為這個 div是放在 app.component.html 底下。這個 app.component.html 相當於我的 root layout。所有其他的 component 都會出現在 app.component.html 裡面。
因此我想把控制 div開關的動作,移到一個 service 裡。這樣每個 component 就可以直接使用這個 service 去進行訊息的顯示/開啟/關閉。
但我發現在 service 裡好像沒辦法去存去我這個 div。即便我用方法一也是一樣沒作用。

因此,我想問問如何在 service 李控制特定 component 中的 DOM / element。謝謝
下面附上我的程式碼:
https://stackblitz.com/edit/angular-s6dilk

0個讚

#2

從service直接控制dom這個想法本身就是一個不正確的思考方式,應該是從service拿到變化的值去決定畫面的呈現
你可以參考一下我的這篇文章看看,裡面有說到我怎麼去做訊息的訂閱

0個讚

#3

謝謝。
在參考您的文章後,再回頭K一下官方文件。看起來是OK了。我覺得,比較詳細的說法,應該是:

透過 service 去更新變數內容,然後在 component.ts 中去訂閱這個 service 中該變數的值的變化。然後在 component.ts 中進行 DOM 的行為操作,例如 show、hide、改 style 等等的動作。

這樣的說法對嗎?

0個讚

#4

https://stackblitz.com/edit/angular-g41tz3 你看下这样行不行

0個讚

#5

這樣的說法ok,要掌握一個重點,對component來說就是只管值的變化,來產生對應的element或是其他

0個讚