c# - On After Render a Modal razor 组件启动 JavaScript

Question

我有一个带有剃刀组件的 Blazor 应用程序作为模式打开

打开 modal.razor

<ModalScan @ref="ModalScan"><p>Scanner</p></ModalScan>

<button class="btn btn-primary" @onclick="ScanStart">Start Scann</button>

@code{
ModalScan ModalScan;

void ScanStart()
    {
        ModalScan.Show();
    }
}

modal.razor

    @if (_Show)
{
    <div class="modal fade show"  style="display: block;">
        <div class="modal-dialog" style="width: 90%;" @>
            <div id="modal_fullscreen" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Scanner</h5>
                    <button type="button" class="close" data-dismiss="modal" @onclick="Show">&times;</button>
                </div>
                <div class="modal-body">                    
                    <form>
                        <div class="container">
                            <div class="form-row">
                                <div id="loadingMessage">Unable to access video stream </div>
                                <canvas style="width: 100%;" id="canvas" hidden></canvas>
                                <div id="output" hidden>
                                    <div id="outputMessage">No detected.</div>
                                    <div hidden>
                                        <input type="text" id="outputData" value="@CurrentValue"
                                               @onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value.ToString())" />
                                    </div>                                   
                                </div>


                            </div>
                            <div class="form-row">
                                <button type="button" class="btn btn-dark" @onclick="ScanResume">Scan</button>
                            </div>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal" @onclick="Show">Abort</button>
                        <button type="button" class="btn btn-primary" @onclick="saveChanges">Ok</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show"></div>
}

加载此 modal.razor 后，我将启动一个 js 脚本。我只能从一个按钮开始，然后当我在 Show() void 上调用 Javascript 时，DOM 没有加载。

在剃须刀页面上使用它：

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {            
            await JSRuntime.InvokeVoidAsync("startScanner");
        }
    }


 public async void Show()
    {
    _Show = !_Show;
    if (_Show)
    {

    }
}

但不在模态上。是否有任何事件可以检查模态是否从我的模态中的剃刀组件加载完成？

标签： c#.net-corerazorblazor