angular - Electron + Angular7 如何在组件中使用 serialport.list()

Question

感谢 stackoverflow 上的另一个成员，我能够在 Electron 应用程序中使用 SerialPort。现在讨论下一个问题。

我在 Angular 中有一个组件，我希望有一个下拉列表来选择要连接的串行端口。但我想弄清楚 serialport.list() 是如何工作的。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { } from 'electron';
import * as Serialport from 'serialport';
import { SerialService } from './serial.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'electron-angular-serialport';
  comPorts = [];

  constructor(private serial: SerialService) {
    let isElectron: boolean = window && window['process'] && window['process'].type;

    if (isElectron) {
      let serialport: typeof Serialport = window['require']('serialport');
      let app: Electron.App = window['require']('electron').remote;
      console.log(serialport, app, window['process']);
    }
  }

  ngOnInit() {
    this.getPorts();
    console.log(this.comPorts);
  }

  // getPorts() {
  //   this.serial.serialPort.list(function (err, ports) {
  //     ports.forEach(function(port) {
  //       this.comPorts.push(port);
  //     });
  //   });
  // }

  getPorts() {
    this.comPorts = this.serial.serialPort.list();
  }
}

结果



如果您查看注释代码块，您会注意到我试图将每个端口推送到 comPorts。但这给出了一个错误，指出 comPorts 是 未定义 .这很奇怪，因为我认为范围不会在这里丢失。

我会专门捕获这两个端口和推 将它们放入我的 comPorts 中，以便我可以创建一个下拉列表，以便用户可以选择要连接的 Arduino。

干杯，

Answer 1

尝试:

getPorts() {
     this.serial.serialPort.list((err, ports) => {
       ports.forEach(port => {
         this.comPorts.push(port);
       });
     });
   }