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

General
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

2

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

3

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

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

這樣的說法對嗎？

4

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

5

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