Blazor WASM - 如何在布局内更改正文类动态
Posted
技术标签:
【中文标题】Blazor WASM - 如何在布局内更改正文类动态【英文标题】：Blazor WASM - how to change body class dynamic inside Layout 【发布时间】：2020-11-18 07:07:28 【问题描述】：我有一个 Blazor 应用程序。 在我的 Index.html (wwwroot) 中，我有以下正文：
<body class="vertical-layout vertical-menu 2-columns fixed-navbar" data-open="click" data-menu="vertical-menu" data-col="2-columns">
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">????</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/app.js"></script>
</body>
</html>
如果你注意到，我的Body 标签有一个类装饰。
我有 3 个布局，我必须将 Body 类更改为不同的值，但由于 Body 标记位于 index.html 内，我找不到这样做的方法。
有什么建议吗？
【问题讨论】：
【参考方案1】：使用 JS 互操作。它可能看起来像这样：
window.bodyLayout =
toggleClass: className =>
$('body').toggleClass(className);
@inject JSRuntime JSRuntime
...
@code
private Task ToggleBodyClass(string className)
return JSRuntime.InvokeVoidAsync("bodyLayout.toggleClass", className);
【讨论】：
非常感谢，有道理。所以当之前的渲染发生时我应该改变身体中的类吗？ 很高兴知道这一点。有意义，因为那是 DOM 存在的时候吧？以上是关于Blazor WASM - 如何在布局内更改正文类动态的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 Blazor WASM 身份网络核心 3.1 消息“您已注销”、“检查登录状态”和“授权”？