问题描述
我试图允许用户指定连接值以通过 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 文档。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)