7

我有一个取决于其父类的剃须刀页面和第二个子类，它有自己的类并从其父类接收数据，我的问题是对 api 的第二次调用，数据没有传递给第二个孩子，当其父级更改其数据时，第二个子级不会被渲染，但它适用于第一个渲染并且正在传递数据。

父剃刀

@inherits ParentBase;

<FirstChild/>
<SecondChild data="@data"/>

FirstChild.剃须刀

@inherits ParentBase;

// call its parent method
<span  @onclick='(() => callApi())'/>

ParentBase.cs

public class ParentBase : ComponentBase
{
   public Data data { get; set; }
   protected override async Task OnInitializedAsync()
   {
       data = await Services.GetData();
   }
   // call from a child
   public void callApi
   {
     data = await Services.GetData();
   }
}

SecondChild.剃须刀

<Table data="@data"/>

SecondChildBase.cs

public class SecondChildBase : ComponentBase
{
   [Parameter]
   public Data data { get; set; }

   protected override void OnParametersSet()
   {
       // this is not getting called
       StateHasChanged();
       Console.WriteLine(data);
   }
}
4

3 回答 3

4

仅仅因为Parent.razorandFirstChild.razor继承自同一个类，并不意味着两个类 ( public Data data { get; set; }) 的数据在更改时将具有相同的值。

当您调用callApi时FirstChild，它会更改它自己的data，如果您想更改父级的data，您需要传递一个参数，FirstChild该参数将是一个在span单击时调用的函数，它将调用Parent's callApi。

FirstChild.剃须刀

<span @onclick="OnClick">Call Parent function</span>

@code 
{
    // Call this EventCallback when the span is clicked
    [Parameter]
    public EventCallback OnClick { get; set; }
}

父剃刀

@inherits ParentBase;

@* Passing OnClick Parameter to call callApi*@
<FirstChild OnClick="@callApi" />
<SecondChild data="@data" />
于 2020-06-03T12:29:09.273 回答
2

我认为您可以尝试数据绑定而不是 CascadingParameter。

文档在这里： https ://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1

特别是关于以下两个主题：

  • 使用组件参数的父子绑定
  • 使用链式绑定的子到父绑定

示例：父组件

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

@code {
    private string password;
}

示例：子组件

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

@code {
    private bool showPassword;
    private string password;
    private string validationMessage;

    [Parameter]
    public string Password
    {
        get { return password ?? string.Empty; }
        set
        {
            if (password != value)
            {
                if (value.Contains(' '))
                {
                    validationMessage = "Spaces not allowed!";
                }
                else
                {
                    password = value;
                    validationMessage = string.Empty;
                }
            }
        }
    }

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

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();

        return PasswordChanged.InvokeAsync(Password);
        }

    }

您的子组件需要提供一个 {Password}Changed，其中 {} 是您的参数。这样，当孩子更新时，父母也会更新（以及所有其他绑定参数）

于 2020-06-03T17:51:51.657 回答
1

只需在服务调用简单后将 StateHasChanged() 移动到基础......

于 2020-06-18T14:14:55.943 回答