WebView2 与 Angular 兼容吗？答案

【问题标题】：Is WebView2 compatible with Angular?WebView2 与 Angular 兼容吗？
【发布时间】：2021-03-06 15:36:11
【问题描述】：

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

【问题讨论】：

【解决方案1】：

我编写了一个小型 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 或
CoreWebView2.PostWebMessageAsJSON 将消息发布到 WebView2 控件中的 Web 内容。消息被
捕获处理程序添加到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);

【讨论】：