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来更改 logo img src 时，它崩溃了（什么也没有。正在显示），这可能是因为 init（）会在加载实际图像之前执行所有操作，并且无法从img获取ID。我还没有解决方案，所以任何想法都很棒。

我这样做只是为了测试，稍后我将添加一个if子句来测试用户是否要启用暗模式

Answer 1

您是正确的。任何组件实例的init钩子都将在正确构建组件DOM（模板）之前执行，因此我们目前无法访问DOM。您可以将所有与DOM相关的逻辑移至名为didInsertElement的组件的另一个生命周期挂钩，该挂钩仅在DOM构建之后才会被调用。

This twiddle应该可以帮助您！

但是，建议使用模板来声明而不是手动更新DOM，以避免意外的错误。在这种情况下，模板可以声明为

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

因此更改状态isDarkTheme就足以跟踪所有相关的DOM / UI件。

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

1 个答案: