blazor js互操作未选择html元素_Blazor

blazor js互操作未选择html元素

blazor

blazor js互操作未选择html元素,blazor,Blazor,我有一个简单的方法，假设在页面上选择一个复选框，然后相应地切换侧边栏 function toggleSidebar() { var cbx = document.getElementById("toggler-in-sidebar"); console.log(cbx); //this line display null. //console.log("Is checkbox checked: " + cbx.

我有一个简单的方法，假设在页面上选择一个复选框，然后相应地切换侧边栏

function toggleSidebar() {
  var cbx = document.getElementById("toggler-in-sidebar");
  console.log(cbx);                                      //this line display null.
  //console.log("Is checkbox checked: " + cbx.checked);
}

alert（），console.log（）起作用，但使用页面上的getElementById（）元素选择将返回null

这是我的剃须刀页面

@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime

<div class="wrapper">
  <div class="sidebar">
    <div class="sidebar__header">
        <div class="sidebar__header__logo">
            Logo
        </div>
        <div class="sidebar__header__toggler">
            <label for="toggler-in-sidebar" class="sidebar__toggler__label">&equiv;</label>
            <input type="checkbox" id="toggler-in-sidebar" class="sidebar__toggler__checkbox" />
        </div>
    </div>
    <div class="sidebar__content">
        Sidebar content
    </div>
 </div>
 <div class="content">
    <header class="header">
        Header
    </header>
    <div class="page">
        @Body
    </div>
  </div>
 </div>

 @code {
  protected override async Task OnInitializedAsync()
  {
    await JSRuntime.InvokeVoidAsync("toggleSidebar");
  }
 }

@继承LayoutComponentBase
@注入IJSRuntime JSRuntime
标志
&等价物；
边栏内容
标题
@身体
@代码{
受保护的重写异步任务OnInitializedAsync（）
{
等待JSRuntime.InvokeVoidAsync（“toggleSidebar”）；
}
}

下面是index.html页面中的参考

<body>
  <app>Loading...</app>

  <script src="_framework/blazor.webassembly.js"></script>
  <script src="js/toggle-sidebar.js"></script>
</body>


加载。。。

我错过什么了吗

谢谢你的帮助。

这看起来是一个非常简单的解决方案。在初始化方法期间，DOM不包括在内，因为它还不存在。您需要挂接到另一个生命周期方法，

OnAfterRenderAsync

，它将做的是等待DOM呈现，这样它就可以全部使用，然后通过ID追踪元素以实现互操作。因此，只需将@code更改为：

@code{
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
等待JSRuntime.InvokeVoidAsync（“toggleSidebar”）；
}
}

这应该可以让您开始，然后您还可以在OnAfterRenderAsync方法中使用

if

语句，仅在第一次渲染时执行JS，或者仅在非第一次渲染时执行JS，等等

希望这有帮助

这看起来是一个非常简单的修复方法。在初始化方法期间，DOM不包括在内，因为它还不存在。您需要挂接到另一个生命周期方法，

OnAfterRenderAsync

，它将做的是等待DOM呈现，这样它就可以全部使用，然后通过ID追踪元素以实现互操作。因此，只需将@code更改为：

@code{
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
等待JSRuntime.InvokeVoidAsync（“toggleSidebar”）；
}
}

这应该可以让您开始，然后您还可以在OnAfterRenderAsync方法中使用

if

语句，仅在第一次渲染时执行JS，或者仅在非第一次渲染时执行JS，等等

希望这有帮助

在Blazor中，默认的

render mode=“serverprerender”

组件的实际初始标记在服务器上得到解析，并发送到浏览器

浏览器最初会看到预呈现的HTML，然后交互就接管了

预渲染期间没有浏览器，因此没有JavaScript，因此无法与JavaScript进行互操作

如果您执行JSInterop，请确保在AfterRenderAsync上调用

，在OnInit上调用或在ParameterSet上调用而不是
因为在预渲染期间，OnAfterRenderAsync不会运行。
在调用JSInterop时进行异步调用，那么只有它才能与WebAssembly和Blazor服务器一起工作，因为对于Blazor服务器，调用是通过网络进行的，因此必须是异步调用
希望它能澄清您对生命周期/流程的疑问
 在Blazor中，默认的render mode=“serverprerender”

组件的实际初始标记在服务器上得到解析，并发送到浏览器
浏览器最初会看到预呈现的HTML，然后交互就接管了
预渲染期间没有浏览器，因此没有JavaScript，因此无法与JavaScript进行互操作
如果您执行JSInterop，请确保在AfterRenderAsync上调用，在OnInit上调用或在ParameterSet上调用而不是
因为在预渲染期间，OnAfterRenderAsync不会运行。
在调用JSInterop时进行异步调用，那么只有它才能与WebAssembly和Blazor服务器一起工作，因为对于Blazor服务器，调用是通过网络进行的，因此必须是异步调用
希望它能澄清您对生命周期/流程的疑问
 我认为生命周期和角度有点不同。我需要花一些时间来了解它们之间的区别。非常感谢你，我认为生命周期与角度有点不同。我需要花一些时间来了解它们之间的区别。非常感谢你，