24

我在 ASP.NET Core 3 preview 4 中使用服务器端 Blazor 组件。

我有一个父组件和子组件，使用相同的共享模型，如下所示：

模型 ：

public class CountModel
{
    public int Count { get; set; }

    public void Increment()
    {
        Count++;
    }
}

父组件：

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@currentCount.Increment">+1 from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@functions {
    private CountModel currentCount = new CountModel();
}

子组件：

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@currentCount.Increment">+1 from child</button>


@functions {
    [CascadingParameter]
    private CountModel currentCount { get; set; }
}

它是用于父级和子级的模型的同一个实例。当模型从父模型更新时，两者都显示正确的增量值。当它从孩子更新时，只有孩子显示正确的值。

从子组件更新时，如何强制刷新父组件？

请注意，这里我有一个更新模型的功能，但我希望解决方案在数据绑定到输入时起作用。

4

7 回答 7

42

创建共享服务。在父项中订阅服务的RefreshRequested事件，并从子项中订阅 Invoke()。在父方法中调用 StateHasChanged();

public interface IMyService
{
    event Action RefreshRequested;
    void CallRequestRefresh();
 }

public class MyService: IMyService
{
    public event Action RefreshRequested;
    public void CallRequestRefresh()
    {
         RefreshRequested?.Invoke();
    }
}


//child component
MyService.CallRequestRefresh();


//parent component
MyService.RefreshRequested += RefreshMe;

private void RefreshMe()
{
    StateHasChanged();
}
于 2019-04-22T10:18:03.460 回答
9

通过调用它的 StateHasChanged 方法来更新父状态

创建一个方法来更新父级的状态：

public void RefreshState(){
     this.StateHasChanged();
}

通过级联值或参数示例将父级传递给子级：

<CascadingValue Value="this">
  <ChildComponent /> 
</CascadingValue>

现在在子组件上声明级联参数：

[CascadingParameter]
public ParentPageType _Parent { get; set; }

现在，当您想刷新父级时，只需调用：

_Parent.RefreshState();
于 2021-02-16T19:57:08.323 回答
8

以下代码片段是在从其子组件更新模型时刷新父组件的最合适方法。但它增加了更多的便宜：父母和孩子之间没有依赖关系。它不是专门为通知状态更改而创建的。它在某个属性、任何属性发生更改时通知它，它可以向订阅者提供值已更改的属性的名称、新值等。

 using System.ComponentModel;
 using System.Runtime.CompilerServices;
 using System.ComponentModel.DataAnnotations;

这里要注意的要点是我们的模型类实现了 INotifyPropertyChanged 接口...

计数模型.cs

public class CountModel : INotifyPropertyChanged
{
    private int count;
    public int Count
    {
        get => count;
        set => SetProperty(ref count, value);
    }

    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new 
                                   PropertyChangedEventArgs(propertyName));
    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string 
                                                     propertyName = null)
    {
        if (Equals(storage, value))
        {
            return false;
        }

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    public void Increment()
    {
        Count++;
    }
}

Count.razor

@page "/count"
@implements IDisposable

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" @onclick="@currentCount.Increment">+1 
                                                     from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@code {
    private CountModel currentCount = new CountModel();

    protected override void OnInitialized()
    {
       currentCount.PropertyChanged += (sender, args) => StateHasChanged();
    }

    public void Dispose()
    {
        currentCount.PropertyChanged -= (sender, args) => StateHasChanged();
    }
}

CountChild.razor

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" @onclick="@currentCount.Increment">+1 from 
                                                            child</button>


@code {
     [CascadingParameter]
     private CountModel currentCount { get; set; }


}

希望这可以帮助...

于 2020-05-27T09:05:37.107 回答
7

Cascading 参数的流向是向下的。为了让你的父组件被刷新，你想要提供一个子组件可以调用的回调，并传递给它一些值。我已经在此处的 Blazor 部分中展示了如何在父组件上创建回调，以及如何触发回调，将值传递给它。

于 2019-04-20T17:16:46.593 回答
0

绑定可能是另一种更容易的方式。您可以做的是拥有一个作为对象的 [Parameter]（而不是 [CascadingParameter]）。您还声明了一个 Changed EventCallback<typeof(SharedClass)>

[Parameter]
public InputLength Model { get; set; }
[Parameter]
public EventCallback<InputLength> ModelChanged { get; set; }

然后在你的类声明中的父级上，你 @bind-=SharedObject 的实例。

 <InputLength @bind-Model=inputLength></InputLength>

最后一步是调用 Changed.InvokeAsync(object w/ updated data)。执行此操作的位置取决于实际更新共享值的内容。

public double Length;
private double _Length
{
    get { return Model.Length; }
    set { Model.Length = value; ModelChanged.InvokeAsync(Model); }
}

该调用将触发父对象的刷新并根据需要更新 UI。

于 2021-11-06T20:51:33.130 回答
0

这就是您可以实现您正在寻找的功能的方式

这是Model，它有一个父组件将订阅的Action，以获取子组件所做的更改

 public class CountModel
 {
    public int Count { get; set; }    
    public Action Changed;
    
    public void Increment()
    {
       Count++;
       Changed.Invoke();
    }
 }

这是父组件，父组件必须订阅 Model 才能获取计数的变化

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@(()=>currentCount.Increment())">+1 from parent</button>

    <Child></Child>
</CascadingValue>

@code {
    private CountModel currentCount = new CountModel();    

    protected override void OnInitialized()
    {
        currentCount.Changed = StateHasChanged;
    }        
}

这是子组件

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@(()=>currentCount.Increment())">+1 from child</button>    

@code {
    [CascadingParameter]
    private CountModel currentCount { get; set; }
}
于 2022-03-02T16:37:12.890 回答
0

如果子组件调用父组件提供的 EventCallback，则父组件会重新呈现。所以从技术上讲，你可以这样做：

  • 在子组件中，添加以下内容：
[Parameter]
public EventCallback OnIncrement { get; set; }
  • 然后在你增加时调用它（下面的伪代码）：
<button @onClick=@(args => HandleClick()) ... >
Task HandleClick()
{
    currentCount.Increment();

    return OnIncrement.InvokeAsync();
}
  • 在父组件中，提供 OnIncrement 回调：
<CountChild OnIncrement=@( () => {} )/>

即使提供的回调什么都不做，它的调用也会触发重新渲染。

请注意，拥有“什么都不做”的方法/函数通常被认为是代码异味。

于 2022-03-02T14:07:09.707 回答