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文档，您需要先等待dom-ready事件，然后才能访问API：

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

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

...因此，在您的ngAfterViewInit中将其翻译为有说服力的语言是：

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

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

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

Answer 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();
      }

角度6：如何访问Electron <webview>元素的API？

2 个答案: