基本的组件导入方式为:

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脚本的更多相关文章

  1. php如何优雅地把数组传递给前端js脚本?

    比如说http://echarts.baidu.com/demo...这个例子中,一般里面的timeData数组都是数据库的所有记录的单独某一个列的集合,而例子中第149行的 data:[ 1,2,3 ...

  2. React组件导入的两种方式(动态导入组件的实现)

    一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...

  3. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

  4. Spring装配Bean的三种方式+导入和混合配置

    目录 Spring IoC与bean 基于XML的显式装配 xml配置的基本结构 bean实例的三种创建方式 依赖注入的两种方式 构造器注入方式 setter方法注入方式 利用命名空间简化xml 基于 ...

  5. Blazor中的无状态组件

    声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件 如果了解React,那就应该清楚,React中存在着一种组件,它只 ...

  6. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  7. NX二次开发-基于MFC界面的NX对Excel读写操作(OLE方式(COM组件))

    NX二次开发API里没有对EXCAL读写操作的相关函数,市面上有很多种方法去实现,比如UFUN调KF,ODBC,OLE(COM组件)等等.这里我是用的OLE(COM组件)方式去做的,这种在VC上创建的 ...

  8. React技巧之导入组件

    正文从这开始~ 总览 在React中,从其他文件中导入组件: 从A文件中导出组件.比如说,export function Button() {} . 在B文件中导入组件.比如说,import {But ...

  9. 【目录】Newlife XCode组件相关文章目录

    本博客所有文章分类的总目录链接:本博客博文总目录-实时更新  1.Newlife XCode组件相关文章目录  1.Newlife XCode组件资源目录汇总[2013年版]    2.Newlife ...

  10. 解决cxf+spring发布的webservice,types,portType和message以import方式导入

    用cxf+spring发布了webservice,发现生成的wsdl的types,message和portType都以import的方式导入的.. 原因:命名空间问题 我想要生成的wsdl在同个文件中 ...

随机推荐

  1. #斯坦纳树,状压dp#洛谷 3264 [JLOI2015]管道连接

    题目 分析 如果对于每一个频道单独跑斯坦纳树可能会存在两种频道共用一条道路而重复统计的情况, 考虑状压dp,设\(f[s]\)表示选择频道二进制状态为\(s\)的最小贡献,那么对于每个状态跑斯坦纳树然 ...

  2. 浅谈OpenHarmony LiteOS-A内核之基础硬件——中断控制器GIC400

    一.前言 OpenAtom OpenHarmony(以下简称"OpenHarmony")采用多内核架构,支持Linux内核的标准系统.LiteOS-A的小型系统.LiteOS-M的 ...

  3. 美团一面:说说synchronized的实现原理?问麻了。。。。

    引言 在现代软件开发领域,多线程并发编程已经成为提高系统性能.提升用户体验的重要手段.然而,多线程环境下的数据同步与资源共享问题也随之而来,处理不当可能导致数据不一致.死锁等各种并发问题.为此,Jav ...

  4. RabbitMQ 07 发布订阅模式

    发布订阅模式 发布订阅模式结构图: 比如信用卡还款日临近了,那么就会给手机.邮箱发送消息,提示需要去还款了,但是手机短信和邮件发送并不一定是同一个业务提供的,但是现在又希望能够都去执行,就可以用到发布 ...

  5. 用户触达难?流失率高?HMS Core预测服务和智能运营,助你提前掌握营销时机,解决此难题。

    用户流失了,触达难? 活动做了那么多,转化仍然很低? 运营也需要提前思考,预测用户动向,提前精准触达,才能事半功倍.结合HMS Core分析服务的预测服务和智能运营,洞察营销时机,实时落地营销策略,提 ...

  6. Jenkins安装插件很慢的解决方法

    修改 Jenkins /  update  /  default.json  这个文件就可以了 修改内容 1. 把 " www.google.com "  改成  " h ...

  7. 正则表达针对html(九)

    前言 关于处理一些html的东西. 正文 假设有一段html文本: <?xml version="1.0" encoding="UTF-8"?> & ...

  8. linux 连接wifi

    前言 我使用树莓派的时候实际过的. 正文 第一步扫描wifi: iwlist wlan0 scan 然后配置: vim /etc/wpa_supplicant/wpa_supplicant.conf ...

  9. Triton部署mmdeploy导出的TensorRT模型失败篇

    记录一下历程,最终没有部署成功,应该是Ubantu系统版本的问题.现在没有时间搞了,先记录一下,后续用到再填坑. Triton demo git clone -b r22.06 https://git ...

  10. 通过UI自动化方式获取文章、视频信息

    出于学习研究,对某账号的文章.视频分析一翻,尝试使用自动化方式看能否获取相应信息. 获取某号的文章有多重方法: 第一种是通过搜狗浏览器搜索账号(这种方式每天只能获取一篇文章,基本上没啥用.): 第二种 ...