不存在 LayerHost 的 Blazor Fluent UI 下拉问题

Question

我正在处理我的第一个 Blazor 客户端项目，并且我正在使用 Blazor Fluent UI 包作为组件。目前我正在我的页面中添加下拉组件，但是当我运行项目并单击下拉组件时出现错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：LayerHost 不存在。您需要在应用的根目录附近添加一个 LayerHost。 System.Exception：LayerHost 不存在。您需要添加一个 应用程序根附近的 LayerHost。在 BlazorFluentUI.BFULayer.OnParametersSetAsync() 在 Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() 在 Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

我正在基于此代码示例创建我的下拉组件：

<BFUDropdown ItemsSource=@items
                Placeholder="Select an option"
                OnChange=@UncontrolledSingleChangeHandler
                Label=@($"Selected: {uncontrolledSingleSelectionResult?.Text}")
                Style="width:300px;" />
@code {


   IBFUDropdownOption uncontrolledSingleSelectionResult;
   IEnumerable<IBFUDropdownOption> uncontrolledMultiSelectionResult = new List<IBFUDropdownOption>();

   IBFUDropdownOption controlledSingleSelectionResult;
   IEnumerable<IBFUDropdownOption> controlledMultiSelectionResult;

   List<IBFUDropdownOption> items;

   protected override Task OnInitializedAsync()
   {
       items = new List<DataItem> {
           new DataItem("Fruits", SelectableOptionMenuItemType.Header),
           new DataItem("Apple"),
           new DataItem("Banana"),
           new DataItem("Orange"),
           new DataItem("Grape"),
           new DataItem("divider1", SelectableOptionMenuItemType.Divider),
           new DataItem("Vegetables", SelectableOptionMenuItemType.Header),
           new DataItem("Broccoli"),
           new DataItem("Carrot"),
           new DataItem("Lettuce")
       }.Select(x => new BFUDropdownOption { Key = x.Key, Text = x.DisplayName, ItemType = x.Type }).Cast<IBFUDropdownOption>().ToList();

       controlledSingleSelectionResult = items.First(x => x.Key == "Banana");

       controlledMultiSelectionResult = items.Where(x => x.Key == "Banana" || x.Key == "Orange");

       return base.OnInitializedAsync();
   }

   void UncontrolledSingleChangeHandler(BFUDropdownChangeArgs args)
   {
       uncontrolledSingleSelectionResult = args.Option;
   }

   void UncontrolledMultiChangeHandler(BFUDropdownChangeArgs args)
   {
       if (args.IsAdded)
           uncontrolledMultiSelectionResult = uncontrolledMultiSelectionResult.Append(args.Option);
       else
           uncontrolledMultiSelectionResult = uncontrolledMultiSelectionResult.Where(x=> x != args.Option);
   }


   ExampleModel exampleModel = new ExampleModel();

   class ExampleModel
   {
       [Required]
       public IBFUDropdownOption SelectionResult { get; set; }
   }

   public void HandleValidSubmit()
   {
       var i = 3;
   }


}

示例链接为：https://www.blazorfluentui.net/dropdownPage

我在 App.razor 页面中找到了 LayerHost 组件，但即使添加了它，我也遇到了同样的异常。

这是我的 App.razor 页面的代码：

<BFUTheme>
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        @if (!context.User.Identity.IsAuthenticated)
                        {
                            <RedirectToLogin />
                        }
                        else
                        {
                            <p>You are not authorized to access this resource.</p>
                        }
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
        <BFULayerHost>
        </BFULayerHost>
    </CascadingAuthenticationState>
</BFUTheme>

如何告诉 Dropdown 组件使用 BFULayerHost ？

Answer 1

遇到同样的问题，把 BFULayerHost 放在里面解决：

    <BFULayerHost>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    ...
    </Router>
    </BFULayerHost>