blazor优雅的方式导入组件相关的js脚本

blazor,js · 浏览次数 : 0

小编点评

**基本的组件导入方式** ```C# await JsRuntime.InvokeVoidAsync("import", "XXXXX.js"); ``` **优雅的组件导入方式** ```C# public static async ValueTask ImportAsync(this IJSRuntime js, string path) { return await js.InvokeVoidAsync("import", path); } public static async ValueTask ImportAsync(this IJSRuntime js, string path) where T : ComponentBase { var nm = typeof(T).Name; var fnm = typeof(T).FullName!; var sns = fnm.Split('.'); var imported = js.InvokeVoidAsync("import", $"/{string.Join('/', sns)}/{nm}.razor.js"); return imported; } ``` **总结** - 基本组件导入方式是使用 `InvokeVoidAsync` 方法。 - 优雅的组件导入方式是使用 `ImportAsync` 方法，它接受泛型参数，表示要导入的组件类型。 - 优雅的组件导入方式可以指定组件的命名空间。 - 两个方式都支持从不同的命名空间导入组件。

正文

基本的组件导入方式为：

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 }

这种优雅一点不难，只需要写一个扩展方法，把他放在任意地方并且导入命名空间，或者放到和项目同一个命名空间下