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在同个文件中 ...
随机推荐
- 嵌入式C语言设计学习之C语言回顾
C的基本语法-回忆 1.C的结构 C语言的结构还是以函数为主体,通过其他资源的添加来实现高级语言逻辑.所有的操作都是基于主函数展开的.以主函数为顺序列表,其他函数作为功能模块,组成一个完整的系统.所以 ...
- Kingbase ES函数参数模式与Oracle的异同
文章概要: 本文对主要就KES和Oracle的PLSQL中关于存储过程参数模式异同进行介绍,列举和验证了存在的差异 (如果想直接看差异的结论可直接跳到末尾). 一,存储过程的三种参数模式 重新回顾一下 ...
- #构造#CF891B Gluttony
题目 有一个长度为 \(n\) 的数列 \(a\),数字互不相同, 现在要打乱这个数列,设其为 \(b\), 使得 \(a\) 的任意真子序列与对应的 \(b\) 的任意真子序列的数字和不同 输出任意 ...
- #树形dp#B 预算缩减
题目 给定一棵树,你需要删去一些边(可以不删),使得剩下的图中每个点所在的连通块大小都\(\geq k\). 求删边的方案数,对\(786433\)取模.两种方案不同,当且仅当存在一条边在一个方案中被 ...
- #矩阵乘法#洛谷 5343 【XR-1】分块
题目 分析 考虑dp,\(dp[i]=\sum dp[i-j]\) 既然\(j\)很小,那么这显然可以用矩阵乘法优化 代码 #include <cstdio> #include <c ...
- 如何使用DevEco Studio创建Native C++应用
简介 本篇主要介绍如何使用DevEco Studio for OpenAtom OpenHarmony (以下简称"OpenHarmony")创建一个Native C++应用.应用 ...
- 6. Eigenvalues and Eigenvectors
Keys: What are Eigenvalues and Eigenvectors? How to find Eigenvalues and Eigenvectors? Applications ...
- Discovery直播 | 移动应用“通行证”——钥匙环,解锁管家式安全出行服务
用户在登录环节的直接诉求是:别让我等.别让我想.别让我烦.而帐号输入.繁琐验证,以及由此带来的安全风险,总会让很多人望而却步. 如何在简化登录流程的同时保障登录凭证安全?如何帮助用户一键免密登录同一开 ...
- Tailscale 的 TLS 证书过期,网站挂了 90 分钟!
3月7日,基于 WireGuard 的知名 VPN 厂商 Tailscale 的官方网站 tailscale.com 因 TLS 证书过期而中断服务约90分钟. 虽然影响有限,但这起事件还是在 Hac ...
- Harbor高可用集群设计及部署(基于离线安装方式)
原文转自:Harbor高可用集群设计及部署(基于离线安装方式) 架构至美 2022-09-05 09:28 发表于北京 编者荐语: 纯干货.实用,推荐系数5颗星. 以下文章来源于Harbor进阶实战 ...