angular - Angular 6 : How to access API of Electron <webview> Element?

Question

目前使用真棒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'。

那我在做什么错？这是一种好的做法吗？

Answer 1

ViewChild的正确类型是ElementRef(除非它是一个更特定的Angular组件，但在这里似乎不是这种情况)。

@ViewChild('webview') webview: ElementRef;

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

Note: The webview element must be loaded before using the methods.

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

...，因此，在您的ngAfterViewInit中翻译成 Angular 说法是:

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

我认为您不应该将@ViewChild保留为“any”类型并像您一样覆盖它，这是在麻烦，因为这样做会丢失所有 typescript 的类型。

如果要对 native WebViewTag进行类级别的引用，请声明一个附加的类变量webviewNative: WebViewTag = null;，并将其填充在ngAfterViewInit中，并添加this.webviewNative = this.webview.nativeElement;。