要通过浏览器连接到串行设备而无需打开对话框，可以使用Angular框架的ngx-serial库。以下是一个基本的代码示例：

1. 首先，确保你已经安装了ngx-serial库。可以使用以下命令进行安装：

npm install ngx-serial --save

2. 在你的Angular组件中，导入ngx-serial库：

import { Component, OnInit } from '@angular/core';
import { SerialService, SerialPort } from 'ngx-serial';

@Component({
  selector: 'app-serial-connection',
  templateUrl: './serial-connection.component.html',
  styleUrls: ['./serial-connection.component.css']
})
export class SerialConnectionComponent implements OnInit {
  ports: SerialPort[];

  constructor(private serialService: SerialService) { }

  ngOnInit() {
    // 获取可用的串行端口列表
    this.serialService.getSerialPorts().subscribe(
      (ports: SerialPort[]) => {
        this.ports = ports;
      }
    );
  }

  connect(port: SerialPort) {
    // 建立与选定端口的连接
    this.serialService.connect(port).subscribe(
      () => {
        // 连接成功
        console.log('Connected to', port);
      },
      (error: any) => {
        // 连接失败
        console.error('Failed to connect to', port, error);
      }
    );
  }
}

3. 在你的模板文件（serial-connection.component.html）中，使用ngFor指令循环渲染可用的串行端口列表，并绑定connect方法：

Available Serial Ports

  

    {{ port.path }} ({{ port.manufacturer }})
    Connect
  

这样，当用户点击Connect按钮时，将会尝试建立与选定串行端口的连接，并在控制台中打印相关信息。你可以根据需要进一步扩展和处理连接操作。