基本的组件导入方式为:

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. KingbaseES V8R6集群运维案例之---securecmdd工具usePAM配置

    案例说明: 默认在部署securecmdd工具后,在配置文件securecmdd_config中配置参数usePAM=yes,在有的系统主机环境,会导致securecmd客户端连接失败. 适用版本: ...

  2. KingbaseESV8R6表空间与数据库,模式,表的关系

    自定义表空间的作用 使用多个表空间可以更灵活地执行数据库操作.当数据库具有多个表空间时,您可以: 1.将用户数据与系统表数据分开存储在不同性能的存储上,以减少I/O争用. 2.将一个应用程序的数据与另 ...

  3. 【转载】Vue路由 hash与history 的区别

    [转载]Vue路由 hash与history 的区别 两种路由模式原因 对于 Vue 这类渐进式前端开发框架, 为了构建 SPA(单页面应用), 需要引入前端路由系统, 这也就是 Vue-Router ...

  4. MyBatis 简介、优缺点

    40)谈谈 MyBatis Mybatis 是一个半自动化的 ORM 框架,它对 jdbc 的操作数据库的过程进行封装,使得开发者只需要专注于 SQL 语句本身,而不用去关心注册驱动,创建 conne ...

  5. Android按钮_单选框_多选框_文字框

    1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android= ...

  6. #轮廓线dp#洛谷 2435 染色

    题目 有一个 \(n\) 行 \(m\) 列的格点图,你需要给每个点上染上 \(k\) 种颜色中的一种, 要求没有两个相邻点颜色相同.给定第一行与最后一行的染色,试求总染色方案数. 分析 首先对于 \ ...

  7. 陈海波:OpenHarmony技术领先,产学研深度协同,生态蓬勃发展

      11月4日,以"技术筑生态,智联赢未来"为主题的第二届OpenHarmony技术大会在北京隆重举办.本次大会由OpenAtom OpenHarmony(简称"Open ...

  8. C 语言注释和变量详解

    C 语言中的注释 C语言中可以使用注释来解释代码并使其更具可读性.它还可以在测试替代代码时防止执行. 单行注释 单行注释以两个斜杠 (//) 开头. // 和行末之间的任何文本都会被编译器忽略(不会被 ...

  9. SSM框架整合——书籍管理系统

    1.准备工作: 1.1.环境要求 IDEA MySQL 5.7.19 Tomcat 9 Maven 3.6 1.2.数据库设计 创建一个存放书籍数据的数据库表: CREATE DATABASE `ss ...

  10. 华为Push用户增长服务:精准触达,加速增长

    速戳了解华为Push用户增长服务:通过精细化运营,助力开发者高效实现用户增长,提升用户活跃度和粘性! 合作咨询请点此链接 了解更多详情>> 访问华为开发者联盟官网 获取开发指导文档 华为移 ...