Blazor | 如何使用 Button 從父組件跳轉到子組件

Question

我有兩個 Razor 頁面。父頁面需要將參數傳遞給子頁面。它有一個從子頁面調用事件的事件。 現在我想用子頁面渲染整個頁面，如何實現？ PS：實際上，它們是兩個頁面。因為我需要在兩個頁面之間傳遞參數，我將它們視為父組件和子組件。

父頁面中的主要代碼

<MatButton Raised="true" OnClick="GeneratePdf">GeneratePdf</MatButton>
<table >
            <tr >
                <td width="300">描述 <br> Description </td>
                <td width="500">標准選項  <br> Standard Option</td>
                <td width="400">備注  <br> Comments</td>
            </tr>
            ……
</table>
<ABSReporting @ref="child" ABSTI="@ABSTI" ABSTI_HU="@ABSTI.HU"/>  //The child page
@code
{
ABSReporting child;
private void GeneratePdf()
    {
        child.GeneratePdf();
    }
}

子頁面中的主要代碼（子頁面名稱為ABSReporting.razor）

<div @ref=RenderContent> 
     <table>
            <tr>
                <td width="500" class="text-center">
                    ABS Technical Information
                </td>
                <td style="background-color: #CCFFFF" width="400" class="text-center">
                    V6.0
                </td>
            </tr>
            ……
        </table>
</div>
@code
{
 [Parameter]
    public ABSTI ABSTI { get; set; }

    [Parameter]
    public ABSTI_HU ABSTI_HU { get; set; }

    ElementReference RenderContent;
    public async void GeneratePdf()
    {
        string html = await JSRuntime.InvokeAsync<string>("BlazorUniversity.innerHTML", RenderContent);
    }
}

Answer 1

它們是兩頁

他們不是。 即使 ABSReporting 是一個可路由組件（包含帶有路由模板的 @page 指令： @page "/ABSReporting" ），ABSReporting 組件也用作父頁面的子組件。

改變這個：

private void GeneratePdf()
{
    child.GeneratePdf();
} 

至

private async Task GeneratePdf()
{
    await child.GeneratePdf();
} 

和

public async void GeneratePdf()
{
    string html = await JSRuntime.InvokeAsync<string> 
    ("BlazorUniversity.innerHTML", RenderContent);
}

至

public async Task GeneratePdf()
{
    string html = await JSRuntime.InvokeAsync<string> 
    ("BlazorUniversity.innerHTML", RenderContent);

    InvokeAsync(() => {StateHasChanged();});
}

什么是BlazorUniversity.innerHTML ？ According to Blazor conventions BlazorUniversity is a namespace defined on the window object, and innerHTML is a JS function that has a single parameter (ElementReference)... Is that the case?

Answer 2

子頁面代碼更新如下

@if (show)
{
    <div>...</div>
}
@code
{
    bool show = false;
    public async Task GeneratePdf()
    {
        show = true;
        StringBuilder ABS_string = new StringBuilder();
        string html_1 = await JSRuntime.InvokeAsync<string>("BlazorUniversity.outerHTML", ABSTitle);
        string html_2 = await JSRuntime.InvokeAsync<string>("BlazorUniversity.outerHTML", ABSHU);
        ABS_string.Append(html_1);
        ABS_string.Append(html_2);
        string html = ABS_string.ToString();
        show = false;
    }
}