angular - Angular ngx-mqtt - 使用用户在表单上输入的值而不是 app.module.ts 中的硬编码值连接到 mqtt 代理

Question

我试图允许用户指定连接值以通过 Angular Material Dialogue Modal 通过表单连接到 mosquitto 代理，而不是将值硬编码到app.module.ts中。

到目前为止，我可以通过将值硬编码到app.module.ts文件中来连接到代理。我可以毫无问题地查看我的所有 MQTT 主题。

app.module.ts

 import { NgModule, Input } from '@angular/core';
    import { MqttModule, IMqttServiceOptions, IMqttMessage } from "ngx-mqtt";
    import { MqttStatusClientService } from './services/mqtt-status-client.service';
    
    export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = 
    {
      hostname: '<IP ADDRESS>', 
      username: 'username', 
      password: 'password', 
      port: 9001
    };
    
    @NgModule({
    declarations: [
    AppComponent,
    HeaderComponent,
    ],
    
    imports: [
    BrowserModule,
    MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
    ],
    providers: [MqttStatusClientService],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

但是，我想删除这种硬编码值以连接到代理，而是允许用户填写表格以输入值，然后用于连接到代理。一切都在它自己的独立组件中，远离app.module.ts。

这是我的尝试：

代理连接.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MqttService} from "ngx-mqtt";
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
selector: 'app-broker-connect',
templateUrl: './broker-connect.component.html',
styleUrls: ['./broker-connect.component.css']
})
export class BrokerConnectComponent implements OnInit 
{
  constructor(private Form: FormBuilder, private mqtt: MqttService, private    dialogRef: MatDialogRef<BrokerConnectComponent>) { }

BrokerConnectForm = this.Form.group({
brokerName: [''],
brokerUsername: [''],
brokerPassword: [''],
brokerAddress: [''],
brokerPort: ['']
});

brokerName = this.BrokerConnectForm.get('brokerName')?.value
ngOnInit(): void {}

connectToBroker() 
{
  this.mqtt.connect({username: this.BrokerConnectForm.get('brokerUsername')?.value,
  password: this.BrokerConnectForm.get('brokerPassword')?.value,
  hostname: this.BrokerConnectForm.get('brokerAddress')?.value,
  port: this.BrokerConnectForm.get('brokerPort')?.value})

  this.dialogRef.close()
}

正如您在此处看到的，我有一个单独的 Angular 组件，其中包含一个表单组，其中包含每个表单输入以连接到代理。

当表单上的提交按钮被按下时，connectToBroker()函数被调用。

在这个函数中，我尝试使用 MqttService 的内置connect ()方法，我发现可用于 ngx-mqtt 的文档很少，应该允许您通过传入手动连接到代理IMqttServiceOptions 对象格式的值，就像我对 app.module.ts 中的MQTT_SERVICE_OPTIONS常量所做的那样。

但是，这似乎不起作用，因为我从未看到我的主题详细信息值，并且由于某种原因，我收到错误消息说我无法连接到 localhost，即使指定了端口号。在我的例子中，端口号是9001，它也被配置为在 mqtt 代理上的 websockets 上运行。所以我不明白为什么它试图连接到本地主机。

当我将完全相同的值硬编码到 app.module.ts 中的 MQTT_SERVICE_OPTIONS 常量中时，不会发生这种情况。

我还故意输入了错误的代理 IP 地址（在我的表单中），这给了我与下面相同的错误，但它说它无法连接到实际的 IP 地址。但是，如果我传入正确的代理 IP 地址，它会给我如下所示的 localhost 错误：

我不确定我如何能够实现这一点，我可以在 ngx-mqtt 周围找到很少的文档。我确实尝试简单地将用户输入的值直接传递给app.module.ts中的MQTT_SERVICE_OPTIONS常量，但是将值从模态对话框传递到角度应用程序的其他部分似乎很困难，而且我没有成功.

简而言之，我试图在提交表单按钮时通过用户输入连接到远离 app.module.ts 的单独组件中的 mqtt 代理，而不是硬编码 app.module.ts 中的值。

这是ngx-mqtt 文档的链接。

标签： angularmqttmosquittobrokersubmit-button