Question

我有 MainLayout.razor ，其中包含两个组件： Header.razor 和 Content.razor 。通过选择不同的菜单选项，内容将发生更改。随着每个内容的更改，我需要将依赖于内容的值发送到标题。我尝试了不同的技术，但结果相同-标题中的值没有更新。还有什么我需要做的吗？我的代码：

Header.razor ：

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

Content.razor ：

@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);
            }
        }
    }

Answer 1

您可以使用多种方法来解决此问题，我将分享其中的几种方法。

第一种选择是使用外部组件来处理状态并为您的内容和EventCallBack方法传递参数。在大多数情况下，Blazor引擎应自行承担更改并重新呈现。

Link to MS Component Parameters documentation

Link to MS Event Callback documentation

第二个选项涉及更多，涉及使用注入的服务作为状态容器和事件中心，并订阅来自每个组件的事件以收集数据。 Take a look at the answer in this post讨论如何实现这一目标，我建议您深入阅读所提及的有关Blazor DI生命周期的文章，并确保您理解它们，但是一旦这样做，您就可以设置范围或临时服务来仅支持您所在的页面。此选项讨论跨连接更新组件，但是以相同方式使用服务也可用于同一页面上的不同组件。对于您的情况，这可能会算是过大了，但是这是装箱中的好工具。

还具有有关级联参数的快速注释：我看到您上面列出了一个，并且此功能已得到使用，但是它还将捕获[CascadingParameter]属性的所有组件耦合到提供该参数的组件，因为您组件的某些功能将取决于该级联参数。如果您只有1个父级-> 1个子级关系，我会坚持使用[Parameter]和EventCallBack，这将使您的子级组件更加可移植和可重用。但是，如果您需要一个值来传递多个级别的子组件，则最好使用级联该值。您必须权衡每种方法的利弊，但我鼓励您考虑一下。

Blazor：如何将价值从一个组件传递到另一个组件？

1 个答案: