WebView2 与 Angular 兼容吗？

问题描述

我看到一些文章表明 WebView2 是 Microsoft 的 Electron 替代品。但是我找不到任何肯定或否认可以将 Angular 与它一起使用的内容。那么 - 任何人都可以提出一种可能使这成为可能的方法吗？

解决方法

我编写了一个小型 Angular 服务，可以使用 https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf#step-7---communication-between-host-and-web-content 中记录的方法与 WebView2 通信

WebView2 控件中的 Web 内容可以使用 window.chrome.webview.postMessage 向主机发布消息。主机处理消息使用主机上任何已注册的 WebMessageReceived。
主机使用 CoreWebView2.PostWebMessageAsString 或
将消息发布到 WebView2 控件中的 Web 内容 CoreWebView2.PostWebMessageAsJSON。消息被
捕获添加到 window.chrome.webview.addEventListener 的处理程序。

web-view.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebViewService {

  public webViewMessage = new Subject<any>();

  constructor() {
    window?.chrome?.webview?.addEventListener('message',event => {
      this.webViewMessage.next(event.data);
    });
  }

  public postMessage(message: any) {
    window?.chrome?.webview?.postMessage(message);
  }
}

// add chrome to the Window context so typescript stops complaining
declare global {
  interface Window {
    chrome: any;
  }
}

然后订阅webViewMessage接收消息或调用postMessage发送。

选项 2：直接在您的组件中使用：

window?.chrome?.webview?.addEventListener('message',event => {
      ...
    });

和

window?.chrome?.webview?.postMessage(message);

angular angular webview2