暗模式功能，在 init() 中更改 img src 不起作用

Question

在控制器中我有

  init(){
    this._super(...arguments);
    document.body.classList.add("darkMode");
    document.getElementById('mode').src = 'assets/images/logo-white'
  }

在車把中：

<img id="mode" src="assets/images/logo-black.png" alt="white-theme" width="188px" height="56px">

在嘗試將深色主題應用於我的項目時，我成功地向其中添加了該類，但是當我嘗試通過查找其 id 來更改徽標 img src 時，它崩潰了（因為不再顯示任何內容），這可能是因為init()在加載實際圖像之前執行所有操作，並且無法從 img 中獲取 id。 我還沒有解決方案，所以任何想法都會很棒。

我這樣做只是為了測試，稍后我會添加一個 if 子句來測試用戶是否想要開啟暗模式

Answer 1

你是對的。 任何組件實例的init鈎子都將在正確構造組件的 DOM（模板）之前執行，因此此時我們無法訪問 DOM。 您可以將所有與 DOM 相關的邏輯移動到名為didInsertElement的組件的另一個生命周期鈎子中，該組件僅在構建 DOM 后才會調用。

這個小玩意應該能幫到你！

但是，建議使模板聲明性而不是手動更新 DOM，以避免意外錯誤。 在這里，在這種情況下，模板可以聲明性地寫為

<img src={{if this.isDarkTheme "logo-white.png" "logo-white"}} width="188px" height="56px">

這樣更改狀態isDarkTheme就足以跟蹤所有相關的 DOM/UI 片段。