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（）空隙上调用Javascript。

在剃须刀页面上可以使用：

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


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

    }
}

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

在“渲染模态剃刀组件之后”上，启动JavaScript

0 个答案: