Blazor 数据绑定到 javascript 具有来自 C# 的复杂对象的 Web 组件
Blazor databinding to a javascript web component with complex object from C#
我有一个引用自定义 Web 组件 (<omnibar-navigation>) 的 Blazor 应用。
此组件有一个项目 属性，它应该是一个 json 对象，看起来像这样：
[{'title':'Home','icon':'places-home-1','url':'/','metadata':null,'items':null}, ...]
我想知道如何将 C# 复杂对象绑定到 items 属性。
var options = new List<Nav> { new Nav { Title = "Home", Icon = "places-home-1", Url = "/" } };
那么绑定将是这样的（不起作用）：
<omnibar-navigation items="@options">...</omnibar-navigation>
此问题的代码库位于：https://github.com/dahlsailrunner/blazor-oidc。
有确切问题的页面在这里：https://github.com/dahlsailrunner/blazor-oidc/blob/master/Sample.Blazor/Pages/Stencil.razor
组件导入到 Pages/_Host.cshtml 文件中。
您将构建一个组件，其参数 属性 接收您的 Nav 类型的 IEnumerable。您只需要反序列化您的 JSON 并将其绑定到该集合。
查看此要点以了解如何反序列化 JSON 并绑定到 index.razor 文件中的集合
https://gist.github.com/csharpfritz/c4dcfcc731826822e0764728bbd9d88c
好问题。我还注意到通过 Blazor 数据绑定直接绑定 Web 组件的一些问题，尤其是 Web 组件的 connectedCallback which is a kwown issue。
但最棒的是：
如果 Blazor 中的某些内容无法正常工作，您可以随时使用 JavaScript Interop 使其正常工作！
我在这里为您创建了一个博客 post，展示了如何通过 JS Interop 集成 Web 组件，该组件具有这样一个 property/attribute 需要一个复杂的对象：https://www.thomasclaudiushuber.com/2020/02/14/initializing-web-components-in-blazor-via-js-interop/
它还展示了如何使用本机 Blazor 组件包装 Web 组件，以便您可以仅使用 C# 将其绑定。 :-)
这是一个包含所有代码的 git 存储库：https://github.com/thomasclaudiushuber/Blazor-Using-Custom-Web-Component
编码愉快，
托马斯
我有一个引用自定义 Web 组件 (<omnibar-navigation>) 的 Blazor 应用。
此组件有一个项目 属性，它应该是一个 json 对象，看起来像这样：
[{'title':'Home','icon':'places-home-1','url':'/','metadata':null,'items':null}, ...]
我想知道如何将 C# 复杂对象绑定到 items 属性。
var options = new List<Nav> { new Nav { Title = "Home", Icon = "places-home-1", Url = "/" } };
那么绑定将是这样的（不起作用）：
<omnibar-navigation items="@options">...</omnibar-navigation>
此问题的代码库位于：https://github.com/dahlsailrunner/blazor-oidc。
有确切问题的页面在这里：https://github.com/dahlsailrunner/blazor-oidc/blob/master/Sample.Blazor/Pages/Stencil.razor
组件导入到 Pages/_Host.cshtml 文件中。
您将构建一个组件，其参数 属性 接收您的 Nav 类型的 IEnumerable。您只需要反序列化您的 JSON 并将其绑定到该集合。
查看此要点以了解如何反序列化 JSON 并绑定到 index.razor 文件中的集合
https://gist.github.com/csharpfritz/c4dcfcc731826822e0764728bbd9d88c
好问题。我还注意到通过 Blazor 数据绑定直接绑定 Web 组件的一些问题，尤其是 Web 组件的 connectedCallback which is a kwown issue。
但最棒的是：
如果 Blazor 中的某些内容无法正常工作，您可以随时使用 JavaScript Interop 使其正常工作！
我在这里为您创建了一个博客 post，展示了如何通过 JS Interop 集成 Web 组件，该组件具有这样一个 property/attribute 需要一个复杂的对象：https://www.thomasclaudiushuber.com/2020/02/14/initializing-web-components-in-blazor-via-js-interop/
它还展示了如何使用本机 Blazor 组件包装 Web 组件，以便您可以仅使用 C# 将其绑定。 :-)
这是一个包含所有代码的 git 存储库：https://github.com/thomasclaudiushuber/Blazor-Using-Custom-Web-Component
编码愉快， 托马斯