Question

我尝试阅读不同的解释，但似乎无法确切找到此错误的原因。

我正在创建一个ElectronJS项目（在 Typescript 中）。我有标准文件 main.ts 作为切入点，而index.html作为主页。我还添加了renderer.ts文件，该文件应该包含渲染过程的代码，并且通过-tags包含在index.html中。

main.ts

import { app, BrowserWindow, ipcMain, Tray, Menu } from "electron";
const url = require('url');
var path = require('path');
const renderer = require('./app/ts/renderer.ts');

class MainWindow {

  mainWindow: any;

  constructor() {

  }

  public CreateWindow(): any {
    this.mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
    });

let trayIcon = new Tray('src/app/img/logo.png');

const trayMenuTemplate: any = [{
  label: 'Empty Application',
  enabled: false
},
{
  label: 'Show App',
  click: () => {
    this.mainWindow.show();
  }
},
{
  label: "Hide App",
  click: () => {
    this.mainWindow.hide();
  }
},
{
  label: 'Quit',
  click: () => {
    (<any>app).isQuitting = true;
    app.quit();
  }
}, {
  label: 'Settings',
  click: function () {
    console.log("Clicked on settings")
  }
},

{
  label: 'Help',
  click: function () {
    console.log("Clicked on Help")
  }
}
];

let isMinimized: boolean;

trayIcon.on('double-click', (event) => {
  event.preventDefault();
  if (!isMinimized) {
    this.mainWindow.minimize();
    isMinimized = true;
  } else {
    this.mainWindow.show();
    isMinimized = false;
  }
});

let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
trayIcon.setContextMenu(trayMenu)

this.mainWindow.on('close', () => {
  if (!(<any>app).isQuitting) {
    this.mainWindow = null;
  }
});

this.mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, '/app/index.html'),
  protocol: 'file'
}));

this.mainWindow.on('minimize', (event: any) => {
  event.preventDefault();
  this.mainWindow.minimize();
});
  }
}

ipcMain.on('render-async-reply', (event: any, arg: any) => {
  console.log("I got a pong from a render-process: " + arg);
});

ipcMain.on('async', (event: any, arg: any) => {
  console.log("ipcMain.on(async): " + arg);
  event.sender.send('async-reply', 'pong');
});

ipcMain.on('httpOK', (event: any, arg: any) => {
  console.log("MainProcess: I got a httpOK from the renderer: -->" + arg);
});

let mw = new MainWindow();
app.on('ready', mw.CreateWindow);

index.html

<!DOCTYPE HTML>
<html>
<head>
  <title>DukaBackup SuperClient</title>
  <script src="./ts/renderer.ts"></script>
</head>

<body>
  <button id="button1" onclick="clickMe()"> Click Me </button>
  <textarea id ="textarea1" rows="4" cols="50">
    This text should be replaced, if the request is successful
  </textarea>
  <button id="button2" onclick="clickThat()">Click for IPC </button>

</body>

</html>

renderer.ts

const { ipcRenderer } = require('electron');
const request = require('request');

//这是问题

function clickThat(){
  ipcRenderer.on('async-reply', (event:any, arg:any) => {
  console.log("ipcRenderer: " + arg)
  event.sender.send('render-async-reply', 'I got your pong')
  })

  ipcRenderer.send('async', 'ping')
}


function clickMe() {
  request({url: 'http://justanurl:6666/swagger/this/is/an/api', qs: {"useWatchers": "false"},  json: true }, (err:any, res:any, body:any) => {  
    if (err) 
    { 
      return console.log(err); 
    }
    console.log(body);
    ipcRenderer.send('httpOK', res.statusCode);       
    let ta1:HTMLElement = <HTMLElement> document.getElementById("textarea1");
    ta1.innerHTML = body;
  }); 
  console.log("I've been clicked man!");  
};

如果我删除周围的function clickThat()却让功能体停留，我会不断得到“无法读取未定义的属性'on'” 。如果我不使用导入/要求，则不会收到错误消息。我还通过将事件处理程序保留在函数中来避免错误。

在这种情况下，为什么不能在函数外部使用事件处理程序？
导入/需要对文件执行什么操作？

与main.ts一起使用似乎很好。我希望有人能对此有所启发，尤其是加深我对javascript / typescript以及Electron内部工作的理解。

电子-无法读取未定义的属性-在外部函数

0 个答案: