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在同个文件中 ...
随机推荐
- DenseBox:思想超前的早期Anchor-free研究 | CVPR 2015
DenseBox检测算法的设计十分超前,如今很多Anchor-free方法有其影子,如果当时不是比Faster R-CNN晚了一点出现,可能目标检测领域很早就开始往Anchor-free的方向发展了 ...
- KingbaseES Json 系列三:Json数据操作函数一
KingbaseES Json 系列三--Json数据操作函数一(JSONB_EACH,JSONB_EACH_TEXT,JSONB_OBJECT_KEYS,JSONB_EXTRACT_PATH,JSO ...
- KingbaseES V8R6运维案例之---普通表toast表故障修复
案例说明: 数据库在日常的维护过程中,在执行表查询(select),如下图所示,出现"could not read block 0 in file "base/16385/1640 ...
- java实战字符串2:中英字符串相互转换
题目描述 输入字符串为中文拼音号码串或者英文号码串,如果输入是中文拼音号码串则转成英文号码串,如果输入是英文号码串则转成中文号码串. 特殊情况是英文号码串会出现Double + 英文数字或者拼音数值. ...
- OpenMP优化for循环的基础运用
OpenMP优化for循环的基础运用 OpenMP作为多线程并行优化API,其使用方式与C++自带的多线程使用方式有很大的不同. 在使用OpenMP时,我们是通过 #pragma omp+字句 所组成 ...
- RedisTemplate 的简单使用
redisTemplate.opsForValue() 方法可以获得一个 Redis String 的操作类,通过该类可以执行一系列字符串类型数据的操作,例如获取.设置.删除数据等. // 示例 1: ...
- #LCT,树状数组#CF1137F Matches Are Not a Child's Play
题目 分析 考虑从删除序列末尾来看,最大值一定在末尾, 然后与次大值之间夹了整条路径的点,降序以此类推 实际上从小到大是每个点到最大点的路径被打通的过程,由此分成若干条实链. 删除序列的位置实际上是到 ...
- OpenHarmony开发者论坛正式上线,盖楼赢惊喜好礼~
你,是否曾遇到OpenHarmony开发难题,却不知找谁解答? 你,是否曾想分享OpenHarmony技术,但没有一个官方投稿平台? 你,是否想加入火热的OpenHarmony开源项目,却不知如何 ...
- Qt 5.12.10 国际化
网上有资料但是不全,所以这里记录一份比较全的 1.创建项目 2.编辑 demo.cpp 这里写button用来做国际化示例,运行软件后是这个样子 #include "demo.h" ...
- JWT对SpringCloud进行认证和鉴权
JWT(JSON WEB TOKEN)是基于RFC 7519标准定义的一种可以安全传输的小巧和自包含的JSON对象.由于数据是使用数字签名的,所以是可信任的和安全的.JWT可以使用HMAC算法对sec ...