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 設計模式帶來的其他一切中受益。