WebView2 与 Angular 兼容吗？

Question

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

Answer 1

我编写了一个小型 angular 服务，可以使用 https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf#step-7---communication-between-host-and-web-content

中记录的方法与 WebView2 通信

Web content in a WebView2 control may post a message to the host using window.chrome.webview.postMessage. The host handles the message using any registered WebMessageReceived on the host.

Hosts post messages to web content in a WebView2 control using CoreWebView2.PostWebMessageAsString or
CoreWebView2.PostWebMessageAsJSON. The messages are caught by
handlers added to 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);

WebView2 与 Angular 兼容吗？

Is WebView2 compatible with Angular?

angular

webview2