Angular 6：如何访问 Electron <webview> 元素的 API？答案

【问题标题】：Angular 6: How to access API of Electron <webview> Element?Angular 6：如何访问 Electron <webview> 元素的 API？
【发布时间】：2018-12-26 12:47:50
【问题描述】：

目前正在使用很棒的Angular Electron Boilerplate。假设我想访问Electron's webview component 的API。

我目前创建了以下示例组件：

import { Component, ViewChild, AfterViewInit } from "@angular/core";

@Component({
    selector: 'browserwindow',
    template: '<webview #webview></webview>'
})
export class BrowserwindowComponent implements AfterViewInit {
@ViewChild('webview') webview: any; //which type do I put here?

constructor() { }

ngAfterViewInit(): void {
    this.webview = this.webview.nativeElement;
    this.webview.openDevTools();
}

但我收到类型错误：无法读取未定义的属性“openDevTools”。

那我做错了什么？这种方法甚至是一种好的做法吗？

【问题讨论】：

标签： angular dom electron

【解决方案1】：

ViewChild 的正确类型是 ElementRef（除非它是更具体的 Angular 组件，但这里似乎不是这种情况）。

@ViewChild('webview') webview: ElementRef;

根据 Electron 文档，在访问 API 之前需要等待 dom-ready 事件：

注意：webview 元素必须在使用方法之前加载。

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
    webview.openDevTools()
})

...因此，在您的 ngAfterViewInit 中转换为 angular-speak 将是：

let webviewNative: WebviewTag = this.webview.nativeElement;
webviewNative.addEventListener('dom-ready', () => {
    webviewNative.openDevTools();
});

我认为您不应该将@ViewChild 保留为“任何”类型并像您一样覆盖它，这是自找麻烦，因为这样做会丢失所有打字稿类型。

如果您想要对本机 WebViewTag 进行类级引用，请声明一个附加类变量 webviewNative: WebViewTag = null; 并在 ngAfterViewInit 中使用 this.webviewNative = this.webview.nativeElement; 填充它。

【讨论】：

最后一段代码sn-p报错：'this.webview.addEventListener is not a function'。但是，如上所述用 nativeElement 覆盖 this.webview 然后调用 addEventListener 似乎可行。
没关系！ Electron 框架提供了 WebviewTag 类。不确定如何将 dom 元素转换为 WebviewTag。或者在调用该方法之前可能没有正确加载 webviewTag。任何提示如何避免这种情况？也许还有另一个角度生命周期钩子？
您是否尝试过仅将 viewchild 设为 WebviewTag 类型？
在我看来，webview 标签实际上并没有公开任何有用的东西，所以我认为这不会起作用。对不起，我没有想法！你考虑过这样的事情吗？ github.com/ThorstenHans/ngx-electron
太好了，很高兴我能帮助@cyluxx - 我已经更新了答案以反映现在直接使用 WebviewTag 类型:)

【解决方案2】：

  <webview #webview src="https://www.google.com"
        style="display:inline-flex; width:100vw; height:100vh;">
  </webview>

      @ViewChild("webview") webview:ElementRef;
      webviewNative: WebviewTag;
    
      constructor() { }
    
      ngOnInit(): void {
       
      }
    
      ngAfterViewInit(): void {
        this.webviewNative = this.webview.nativeElement;
        this.webviewNative.addEventListener('dom-ready', () => {
            this.webviewNative.openDevTools();
        });
      }
    
      back(){
        this.webviewNative.goBack();
      }
    
      next(){
        this.webviewNative.goForward();
      }

【讨论】：

请不要只发布代码，添加描述以获得更多帮助