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

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

我试图允许用户指定连接值以通过 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。

这是我的尝试：

broker-connect.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 中使用 MQTT_SERVICE_OPTIONS 常量所做的一样.ts.

然而，这似乎不起作用，因为我从未看到我的主题详细信息值，并且由于某种原因，我收到错误消息，说我无法连接到 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 中的值。

Here is a link 到 ngx-mqtt 文档。