【问题标题】:How to use two way data binding in Blazor Component Library Project如何在 Blazor 组件库项目中使用双向数据绑定
【发布时间】:2020-10-09 12:38:22
【问题描述】:

我想在 Blazor 项目之间共享一些基本输入组件,但在支持数据绑定方面,我的共享 razor 项目中似乎缺少一些东西。

使用微软组件绑定示例here

组件代码如下所示:

    Password: <input
    value="@Password"
    @oninput="OnPasswordChanged"
    type="@(showPassword ? "text" : "password")" />

<label><input type="checkbox" @bind="showPassword" />Show password</label>

@code {
    private bool showPassword;

    [Parameter]
    public string Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();
        return PasswordChanged.InvokeAsync(Password);
    }
}

然后这样使用:

<PasswordBox @bind-Password="password" />

@code {
    string password;
}

当组件直接在我的 Blazor WebAssembly 项目中声明时,这将按预期工作。但是,如果我将组件移动到库中以便在共享组件中使用它,则会出现编译错误:

错误无法从绑定属性推断属性名称 '绑定密码'。绑定属性的形式应为“绑定”或 “绑定值”及其相应的可选参数,如 '绑定值:事件','绑定:格式'

我的猜测是我的共享项目中缺少一个处理这些绑定属性的引用 - 但我不知道如何找到我需要引用的内容。

我目前参考:

  • NETStandard.Library 2.1

  • Microsoft.AspNetCore.Components (3.1.5)

  • Microsoft.AspNetCore.Components.Web (3.1.5)
  • System.Net.Http.Json (3.2.1)

这对于字段的普通属性绑定和将值从一个组件传递到另一个组件来说似乎已经足够了——但对于这种特定的双向绑定语法来说却不是。我错过了什么?

【问题讨论】:

    标签: blazor


    【解决方案1】:
    1. 您的组件是否在 Razor 组件库中定义?
    2. 您是否为库项目添加了对 Blazor 应用程序的引用?
    3. 最重要的是,您是否在库项目中定义了可路由(用 @page 指令装饰)组件?
    4. 您是否有一个 SharedObjects 项目,您可以在其中定义在 Razor 组件库项目和 Blazor 应用程序项目中使用的对象?您是否在两个项目中都添加了对 SharedObjects 项目的引用?

    【讨论】:

    • 缺少命名空间 _Imports.razor (d'oh)
    猜你喜欢
    • 2019-10-01
    • 1970-01-01
    • 2020-01-15
    • 2022-07-20
    • 2016-07-14
    • 2020-03-26
    • 1970-01-01
    • 2022-11-07
    • 2023-02-24
    相关资源
    最近更新 更多