基本的组件导入方式为:

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. 国民经济行业分类与代码(GB/T 4754-2002、GB/T 4754-2011、GB/T 4754-2017)并存入MySQL数据库【可获取下载】

    戳链接下载:https://download.csdn.net/download/weixin_45556024/34913490 或关注公众号[靠谱杨阅读人生]回复[行业]获取. 整理不易,资源fu ...

  2. C++设计模式 - 职责链模式(Chain of Resposibility)

    数据结构模式 常常有一-些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无 ...

  3. 体验Semantic Kernel图片内容识别

    前言 前几日在浏览devblogs.microsoft.com的时候,看到了一篇名为Image to Text with Semantic Kernel and HuggingFace的文章.这篇文章 ...

  4. 在DAYU200上实现OpenHarmony跳转拨号界面

    一.简介 日常生活中,打电话是最常见的交流方式之一,那么如何在OpenAtom OpenHarmony(简称"OpenHarmony")中进行电话服务相关的开发呢?今天我们可以一起 ...

  5. Numpy结构化数组

    Numpy结构化数组 Numpy的结构化数组和记录数组为复合的.异构的的数据提供了非常有效的存储. 结构化数组 In [1]: import numpy as np In [2]: name = [' ...

  6. VSCode如何通过Ctrl+P快速打开node_modules中的文件

    背景 咱们新建一个NodeJS项目,必然会安装许多依赖包,因此经常需要查阅某些依赖包的源码文件.但是,由于node_modules目录包含的文件太多,出于性能考虑,在VSCode中默认情况下是禁止搜索 ...

  7. KL散度和交叉熵的对比介绍

    KL散度(Kullback-Leibler Divergence)和交叉熵(Cross Entropy)是在机器学习中广泛使用的概念.这两者都用于比较两个概率分布之间的相似性,但在一些方面,它们也有所 ...

  8. HarmonyOS音频通话开发指导

      常用的音频通话模式包括VOIP通话和蜂窝通话. ● VOIP通话:VOIP(Voice over Internet Protocol)通话是指基于互联网协议(IP)进行通讯的一种语音通话技术.VO ...

  9. HarmonyOS Codelab 优秀样例——溪村小镇(ArkTS)

    一.  介绍 溪村小镇是一款展示溪流背坡村园区风貌的应用,包括园区内的导航功能,小火车行车状态查看,以及各区域的风景展览介绍,主要用于展示HarmonyOS的ArkUI能力和动画效果.具体包括如下功能 ...

  10. APISIX 简单的自定义插件开发步骤

    本文基于 APISIX 3.2 版本进行插件开发并运行通过. APISIX 目前开发插件比较简单,只需要编写 Lua 源代码并放到默认的插件目录下,然后通过配置文件开启插件即可,我们如果使用 Dock ...