Blazor使用级联值实现Dialog关闭功能

思路

1.在模板页面增加CascadingValue传入Dialog的实例
2.在BaseComponent中加入[CascadingParameter]特性声明级联Dialog实例参数
3.在模块页面按钮方法中调用Dialog实例参数的Close方法

模板页面

<div class="app">
    <CascadingValue Value="dialog">
        <DynamicComponent Type="componentType" />
    </CascadingValue>
</div>
<Dialog @ref="dialog" />
@code {
    private Dialog dialog;
    private Type componentType;
}

BaseComponent

public class BaseComponent : ComponentBase, IDisposable {
    [CascadingParameter]
    protected Dialog Dialog { get; set; }
}

模块页面

@inherits BaseComponent
<div>
    <button @onclick="OnOpen">打开</button>
</div>
@code {
    private void OnOpen() {
        UI.Show(new DialogOption{
            Title = "测试",
            Content = builder => {
                builder.Element("button", b => {
                    b.Text("关闭").OnClick(EventCallback.Factory.Create(this, e => Dialog.Close()));
                })
            }
        });
    }
}