Blazor 加载布局上的元素

Question

当页面 A 打开时如何仅加载导航栏部分 A 或如何知道布局中加载了哪个页面？

布局：

@inherits LayoutComponentBase
<NavMenu />
<div class="container">
    @Body
</div>

导航菜单

<nav class="navbar">
<div>elementA</div>
<div>elementB</div>
</nav>

页面 A：

@Page "/PageA"
<div class="row">
...
</div>

B页：

@Page "/PageB"
<div class="row">
...
</div>

Answer 1

NavigationManager.Uri可以获取当前的 uri。可以检查 Uri 中是否包含PageA或PageB 。可以更改 NavMenu，如下所示：

@inject NavigationManager NavigationManager
<nav class="navbar">
                @{ if (NavigationManager.Uri.Contains("PageA"))
                    {
                        <div>elementA</div>
                    }
                    else if (NavigationManager.Uri.Contains("PageB"))
                    {
                        <div>Fetch Data</div>
                    } 
                 }
            </nav>

这是一个演示：

导航菜单：

<nav class="navbar" style="color:white">
    @{ if (NavigationManager.Uri.Contains("counter"))
        {
            <div>counter</div>
        }
        else if (NavigationManager.Uri.Contains("fetch"))
        {
            <div>fetch data</div>
        } }
</nav>

柜台：

@page "/counter"
...

获取数据：

@page "/fetchdata"
...

结果：