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 }
这种优雅一点不难,只需要写一个扩展方法,把他放在任意地方并且导入命名空间,或者放到和项目同一个命名空间下
这种优雅一点不难,只需要写一个扩展方法,把他放在任意地方并且导入命名空间,或者放到和项目同一个命名空间下
blazor优雅的方式导入组件相关的js脚本的更多相关文章
- php如何优雅地把数组传递给前端js脚本?
比如说http://echarts.baidu.com/demo...这个例子中,一般里面的timeData数组都是数据库的所有记录的单独某一个列的集合,而例子中第149行的 data:[ 1,2,3 ...
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- 如何优雅的设计React组件
如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
- Spring装配Bean的三种方式+导入和混合配置
目录 Spring IoC与bean 基于XML的显式装配 xml配置的基本结构 bean实例的三种创建方式 依赖注入的两种方式 构造器注入方式 setter方法注入方式 利用命名空间简化xml 基于 ...
- Blazor中的无状态组件
声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件 如果了解React,那就应该清楚,React中存在着一种组件,它只 ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
- NX二次开发-基于MFC界面的NX对Excel读写操作(OLE方式(COM组件))
NX二次开发API里没有对EXCAL读写操作的相关函数,市面上有很多种方法去实现,比如UFUN调KF,ODBC,OLE(COM组件)等等.这里我是用的OLE(COM组件)方式去做的,这种在VC上创建的 ...
- React技巧之导入组件
正文从这开始~ 总览 在React中,从其他文件中导入组件: 从A文件中导出组件.比如说,export function Button() {} . 在B文件中导入组件.比如说,import {But ...
- 【目录】Newlife XCode组件相关文章目录
本博客所有文章分类的总目录链接:本博客博文总目录-实时更新 1.Newlife XCode组件相关文章目录 1.Newlife XCode组件资源目录汇总[2013年版] 2.Newlife ...
- 解决cxf+spring发布的webservice,types,portType和message以import方式导入
用cxf+spring发布了webservice,发现生成的wsdl的types,message和portType都以import的方式导入的.. 原因:命名空间问题 我想要生成的wsdl在同个文件中 ...
随机推荐
- 24年3月使用VS22编译Telegram Desktop
0.环境准备,我使用的VS版本是17.9.4,SDK版本是10.0.22621.0,最好不要用太老的版本 1.去下载Python,git,cmake这三个工具,然后在D盘根目录新建TBuild文件夹, ...
- 前端问题整理 Vite+Vue3+Ts 创建项目及配置 持续更新
前端问题整理 持续更新 目录 前端问题整理 持续更新 前端 Vue 篇 @项目配置 1.node 版本过高问题 安装nvm 管理node版本 2.镜像证书无效问题 3.npm 版本问题 4.npm i ...
- 【放假第1天】采购季倒计时 2G 50/年,4G 618/3年 云服务器选购攻略 阿里云 腾讯云 京东云对比 搭建网站、数据分析
更新日期:4月4日(阿里云价格回调,京东云采购季持续进行) <最新对比表>已更新在文章头部-腾讯云文档,文章具有时效性,请以腾讯文档为准! https://docs.qq.com/do ...
- Java HashMap 和 HashSet 的高效使用技巧
Java HashMap HashMap 是一种哈希表,它存储键值对.键用于查找值,就像数组中的索引一样.HashMap 的优势在于它可以使用任何类型作为键,并且查找速度很快. 创建 HashMap ...
- DS-Net:可落地的动态网络,实际加速1.62倍,快改造起来 | CVPR 2021 Oral
论文提出能够适配硬件加速的动态网络DS-Net,通过提出的double-headed动态门控来实现动态路由.基于论文提出的高性能网络设计和IEB.SGS训练策略,仅用1/2-1/4的计算量就能达到静态 ...
- linux上操作 压缩包 的命令
# tar.gz 解压缩 # 解压 tar -zxvf a.tar.gz # 压缩 tar -zcvf a.atr.gz a # zip 解压缩 # 压缩 zip -vr a.zip a/* # 解压 ...
- centos6.5源码编译http2.4.9、虚拟主机、基于用户认证
centos6.5源码编译http2.4.9.虚拟主机.基于用户认证 2014-04-23 07:45 作者: 51linux 来源: 本站 浏览: 0 views 我要评论 字号: 大 中 ...
- js 检查对象是否没有字段
前言 我以前遇到的一个问题. var object={}; if(object=={}) { } 在这里我遇到了问题,一直是lese状态. 后来想想其实也是自己犯了一个很严重的问题,这两个不是同一个对 ...
- 推荐一波微软家的浏览器:EDGE
前段时间英雄联盟(LOL)队伍 EDG 夺冠成为热门事件,上了各大热搜,即使大家不玩英雄联盟,相信也多多少少有听说相关信息吧! 今天我们的主角并不是 EDG,而是微软的新版浏览器 EDGE !!! 微 ...
- DC-1渗透靶场实战速通版
"感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 文章为速通 ...