如何在 JavaScript 端添加的元素中嵌入 Razor 組件

Question

概述

在 Blazor WebAssembly 應用程序中，我想在 JavaScript 端新添加的 div 元素中嵌入一個 Razor 組件。 請讓我知道是否有更好的方法。

我想做的事

1. 提前准備 Sample.razor 等組件
2. 響應初始頁面上的按鈕點擊調用 JavaScript 函數
3. 在被調用的 JavaScript 函數中通過 createElement 添加 div 元素
4. 在上面添加的 div 元素中嵌入 Sample.razor 組件

我試過的

• 對上面 3. 中添加的 div 元素使用 innerHTML，並包含 Razor 組件的調用標記。( <Sample></Sample> )

-> 什么都沒有顯示。

• 在 innerHTML 中添加 iframe/object/embed 等元素，並包含 razor 組件的路徑。 (src='/樣本')

-> 未找到。 （因為這是一個 WebAssembly 應用程序，如果我們向服務器請求，組件頁面不會呈現。）

環境

• 視覺工作室 2019
• .NET 5
• 使用 Blazor WebAssembly 模板從 Visual Studio 創建項目

Answer 1

如果您提前准備了 Simple.Razor 組件，實現此目的的一種方法是在 if 條件下分配此組件，如下所示，

@If(visible==true){<div><simple></simple></div>}

並按下按鈕更改函數中的可見變量，然后，

StateHasChanged()

它會做你想做的事情，你不必做 JSInjection。