Blazor: 如何从一个组件向另一个组件发送值?

我有 MainLayout.razor 有两个组件。Header.Razor内容.剃须刀. 通过选择不同的菜单选项,内容被改变。每改变一个内容,我都需要发送内容相关的 价值头部. 我尝试了不同的技术,但结果都是一样的。价值头部 没有得到更新。我还需要做什么吗?我的代码。Header. razor:

    <div>Content Name: @ContentName</div>
    @code {
        [Parameter]
        public string ContentName{ get; set; }
    }

内容.剃须刀:

@code{
    [CascadingParameter]
    MainLayout Parent { get; set; }

    protected override void OnInitialized()
        {
            base.OnInitialized();
            ContentName = "Content 1";
            Parent.SetParameters(ContentName);
        }
}

MainLayout.razor:

@inherits LayoutComponentBase
@inject BlazorQART.Data.AppState AState
<div class="sidebar" >
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <Header ContentName="@_ContentName" />
    </div>
    <div class="content px-4">
        <CascadingValue Value="@this">
            @Body
        </CascadingValue>
    </div>
</div>
@code{
    private string _ContentName{ get; set; }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        AState.OnContentChange = OnContentChanged;
    }
    public void SetParameters (string content)
    {
        AState.ChangedContent = content;
    }
    protected async void OnContentChanged(string content)
    {
        await InvokeAsync(() =>
        {
            _ContentName = content;
        });
    }

AppState.cs:

    public class AppState
    {
        private string _ChangedContent;
        public Action<string> OnContentChange { get; set; }
        public string ChangedContent
        {
            get { return _ChangedContent; }
            set
            {
                _ChangedContent= value;
                OnContentChange.Invoke(_ChangedContent);
            }
        }
    }

解决方案:

有很多方法可以用来解决这个问题,我将分享其中的几种。

第一个方案是使用一个外部组件来处理状态,并为你的内容传递参数和一个 EventCallBack 方法。在大多数情况下,Blazor引擎应该会接收到这些变化并自行重新渲染。

MS组件参数文档的链接

链接到MS事件回调文档

第二种方案涉及的内容更多一些,涉及使用注入的服务作为状态容器和事件中心,并从每个组件中订阅事件来收集数据。请看这篇文章的答案 以讨论如何实现这一点,我建议你深入研究一下提到的关于Blazor DI寿命的文章,并确保你理解它们,但是一旦你理解了,你可以设置Scoped或Transient服务来支持你所在的页面。这个选项讨论的是跨连接更新组件,但以同样的方式使用服务也可以在同一页面的不同组件上工作。对于你的情况来说,这可能是矫枉过正了,但它是你盒子里的好工具。

关于级联参数的一个简短说明。我看到你在上面列出了一个,这个功能有它的用途, 但它也会将任何捕获到的组件耦合到一起。[CascadingParameter] 属性,因为你的组件的某些功能将依赖于该级联参数。如果你只有1个父级-> 1个子级关系,我会坚持使用 [Parameter]EventCallBack这将使你的子组件更加便携和可重用。然而,如果你需要一个值通过多级子组件传递下去,你可能有一个很好的理由来代替级联的值。你必须权衡每种方法的利弊,但我鼓励你考虑一下。

给TA打赏
共{{data.count}}人
人已打赏
未分类

javafx.fxml.LoadException: Missing resource key

2022-9-9 9:21:19

未分类

如何通过覆盖来自InterruptableJob接口的中断方法来终止当前正在运行的石英作业?

2022-9-9 9:32:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索