blazor优雅的方式导入组件相关的js脚本

基本的组件导入方式为:

复制代码
1 await JsRuntime.InvokeVoidAsync("import", $"XXXXX.js");

优雅的组件导入方式:

复制代码
1 await JsRuntime.ImportAsync<DocEditor>();

这种优雅一点不难,只需要写一个扩展方法,把他放在任意地方并且导入命名空间,或者放到和项目同一个命名空间下:

复制代码
 1 public static ValueTask ImportAsync(this IJSRuntime js, string path)
 2 {
 3     return js.InvokeVoidAsync("import", path);
 4 }
 5 public static ValueTask ImportAsync<Component>(this IJSRuntime js) where Component : ComponentBase
 6 {
 7     var nm = typeof(Component).Name;
 8     var fnm = typeof(Component).FullName!;//获取包含完整命名空间的名称
 9     var sns = fnm.Split('.', StringSplitOptions.RemoveEmptyEntries);
10     sns = sns.SkipWhile(x => x != "Components").TakeWhile(x => x != nm).ToArray();
11     return js.InvokeVoidAsync("import", $"/{string.Join('/', sns)}/{nm}.razor.js");
12 }

这种优雅一点不难,只需要写一个扩展方法,把他放在任意地方并且导入命名空间,或者放到和项目同一个命名空间下

这种优雅一点不难,只需要写一个扩展方法,把他放在任意地方并且导入命名空间,或者放到和项目同一个命名空间下

相关推荐
百锦再24 天前
.Net 优秀框架 ABP全面详解
microsoft·.net·web·blazor·abp·razor
百锦再25 天前
Razor编程中@Helper的用法大全
.net·web·blazor·tag·core·razor·helper
时光追逐者1 个月前
一个开源的 Blazor 跨平台入门级实战项目
c#·asp.net·.net core·blazor
SuperHeroWu72 个月前
【HarmonyOS 5】鸿蒙页面和组件生命周期函数
华为·harmonyos·鸿蒙·自定义组件·页面·生命周期函数
known2 个月前
基于Blazor实现的运输信息管理系统
blazor
时光追逐者3 个月前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
SchuylerEX4 个月前
第三章 组件(12)- 自定义组件类库
前端·c#·.net·blazor·razor·ui框架
SchuylerEX4 个月前
第三章 组件(10)- CSS隔离
前端·css·c#·.net·blazor·razor语法
布布(CeSun)4 个月前
Blazor Hybrid适配到HarmonyOS系统
.net·harmonyos·鸿蒙系统·blazor
SchuylerEX4 个月前
第三章 组件(8)- 控制 <head> 内容
前端·c#·.net·blazor