WPF 中的 WebView2 和 MVVM - PostWebMessage

Question

我已经使用 angular 创建了一个 web 应用程序，现在我想使用 WebView2（不是电子）将它加载到 WPF 应用程序中。 一切正常。 但是，我还希望能够使用以下方法通过 WebView2 发送消息：

webView.CoreWebView2.PostWebMessageAsString(message)

我也想坚持MVVM。 我创建了一个视图：

    {
        public AngularView()
        {
            InitializeComponent();
            InitializeAsync();

        }
        
        public void PostMessage(string message)
        {
            webView.CoreWebView2.PostWebMessageAsString(message);
        }


        private async void InitializeAsync()
        {
            await webView.EnsureCoreWebView2Async();
        }
    }

还有一个 AngularViewModel。 现在我想在触发 ICommand 时从我的 ViewModel 调用 PostMessage(message)，就像在 UI 上按下按钮时一样。 我知道 ViewModel 不应该知道 View，那么 go 的最佳方式是什么？

此外，我还想将我的 PostMessage(message) 方法移动到 WebViewService.cs class，但同样，服务如何知道 AngularView 中 webView 的 CoreWebView2 属性。

Answer 1

您应该抽象出视图/控件，例如通过引入视图实现的接口：

public interface IWebComponent
{
    void Post(string message);
}

然后，您可以使用此接口注入视图 model：

public AngularViewModel(IWebComponent webComponent)
{
    _webComponent = webComponent;
}

在这种情况下，视图 model 只知道一个接口，对实际视图实现没有任何依赖性。 您可以轻松地在单元测试中模拟接口，并从 MVVM 设计模式带来的其他一切中受益。