所以我有这个我经常使用的主题,它是一个包含所有文件的文件夹,例如 Assets 、html 页面等。
如果我从那里启动索引页面并单击菜单项,我们可以清楚地看到动画完美运行。
但是,一旦我添加了该页面使用的相同 CSS 和 JS,它就会开始运行。
您看不到它,但我正在单击每个项目,它不会使菜单动画化。 它还缺少一些图标,如果您比较两者,您可以看到这些图标。
现在有趣的是..
如果我将渲染模式更改为 static
而不是 ServerPrerendered
here
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
但如果我这样做,我们就会遇到这个问题..
Rendering server components from a static HTML page isn't supported.
我添加 HTML 的方式是这样做的。我进入 _Host.cshtml 文件并在标签的顶部像这样
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />
<link href="assets/css/site.css" rel="stylesheet" />
<!-- Articles CSS -->
<link type="text/css" rel="stylesheet" href="assets/plugins/dataTable/datatables.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/summernote/summernote.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
<!-- Main CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
对于 JS 文件也是如此,但我是在标签之前这样做的......
<script src="_framework/blazor.server.js"></script>
<!-- Footer Script -->
<!--================================-->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
<script src="assets/plugins/popper/popper.js"></script>
而且它显然可以找到其中的一些,因为它保持相同的一般样式,并且当我像我之前提到的那样使用“静态”渲染它时,它工作得很好。就好像它渲染的速度太快了。
我哪里做错了?
最佳答案
我认为现在使用 Net5 更容易实现这一点。您可以将此 JavaScript 模块作为静态 Web Assets (wwwroot/exampleJsInterop.js) 添加到您的 .NET 库中,然后使用 IJSRuntime 服务将该模块导入到您的 .NET 代码中:
await jsRuntime.InvokeAsync<JSObjectReference>("import", "./_content/MyComponents/exampleJsInterop.js");
“导入”标识符是专门用于导入 JavaScript 模块的特殊标识符。您使用其稳定的静态 Web Assets 路径指定模块:_content/[LIBRARY NAME]/[WWWROOT 下的路径]。
了解更多 here
关于javascript - 为什么我的 JavaScript 在使用 Blazor 时不能正确呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62374995/