首页 > 解决方案 > Blazor 级联值

问题描述

我的目标是将一些数据传递给通用布局代码。我所拥有的代码片段,但linkedCyclones的值没有级联到较低的组件NavLinkedCyclones

不确定谁将数据传递到布局组件中。我认为级联可以解决问题,但我要么做错了,要么与布局的工作方式不同。

NavLinkedCyclones.razor中的LinkedSetIds始终为

我欢迎任何建议。

NavCycloneMenu.razor

        <CascadingValue Value="@linkedCyclones" Name="LinkedSets">
            <AuthorizeView Roles="Admin, Tier2, Tier3">
                <Authorized>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="CycloneCalculator/GasMix">
                            <span class="oi oi-beaker" aria-hidden="true"></span> Gas Mix
                        </NavLink>
                    </li>
                </Authorized>
            </AuthorizeView>
            <AuthorizeView>
                <Authorized>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="CycloneCalculator/CycloneSizing">
                            <span class="oi oi-calculator" aria-hidden="true"></span> Cyclone Sizing
                        </NavLink>
                    </li>
                </Authorized>
            </AuthorizeView>
        </CascadingValue>

@code {
    private int[] linkedCyclones { get; set; }

    protected override void OnInitialized()
    {
        linkedCyclones = new int[] { 101, 202, 303 };
    }
}

GasMix.剃须刀

@layout CycloneLayout;

<div>
    <h1>Gas Mix</h1>
</div>

CycloneLayout.razor

@inherits LayoutComponentBase

<div class="sidebar">
    <NavCycloneMenu />
</div>

<div class="main">
    <div class="top-row px-4 auth">
        <LoginDisplay />
        <a class="top-row-text" href="https://www.example.com/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        <NavLinkedCyclones />
        @Body
    </div>
</div>

NavLinkedCyclones.razor

<fieldset>
    <legend>Linked Cyclones</legend>

    @for (int i = 0; i < LinkedSetIds.Length - 1; i++)
    {
        <a href=""><img class="img-linked-cyclone" src="images/CycloneLogoNoWhite.png" alt="Cyclone"> Cyclone @(i+1)</a>
        <div class="oi oi-arrow-thick-right" aria-hidden="true"></div>
        <div class="oi oi-arrow-thick-right" aria-hidden="true"></div>
        <div class="oi oi-arrow-thick-right" aria-hidden="true"></div>
    }

    <a href=""><img class="img-linked-cyclone" src="images/CycloneLogoNoWhite.png" alt="Cyclone"> Cyclone @LinkedSetIds.Length</a>
</fieldset>

@code{
    [CascadingParameter(Name = "LinkedSets")]
    public int[] LinkedSetIds { get; set; }
}

标签: c#htmlblazorblazor-server-side

解决方案


推荐阅读