Question

我正在尝试使用 socket.io 以 angular 的形式实现一个 Web 应用程序。我使用ngx-socket-io。

我有这样的服务：

import { Socket } from 'ngx-socket-io';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';


@Injectable()
export class IoRequestService {
  constructor(private socket: Socket) { }
  
  sendMessage(msg: string) {
    this.socket.emit("message", msg);
  }

  getMessage() {
        return this.socket
            .fromEvent("message")
            .pipe(map((data:any) => data.msg));
   }
}

然后我尝试在这样的组件中使用它

import { Component, OnInit } from '@angular/core';
import { Transaction } from '../models/Transaction.model'
import { IoRequestService } from '../services/ioRequest.service'

@Component({
  selector: 'app-transactions',
  templateUrl: './transactions.component.html',
  styleUrls: ['./transactions.component.scss']
})
export class TransactionsComponent implements OnInit {
  transactions: Transaction[] = [];
  constructor() { }

  ngOnInit(): void {
  }

  send() {
    IoRequestService.sendMessage("txt");
  }

}

但是我有一个错误：

Property 'sendMessage' does not exist on type 'typeof IoRequestService'.

您知道为什么会发生这种情况吗？

Answer 1

由于 IoRequestService 使用 @Injectable() 进行注释，因此您需要在组件中 inject its instance：

constructor(private service: IoRequestService) {
}

send() {
  this.service.sendMessage("txt");
}

还要在您的 IoRequestService 中添加 AppModule：

@NgModule({
  ...
  providers: [
    IoRequestService
  ]
  ...
})
export class AppModule {
}

Answer 2

需要在组件中注入服务才能访问

constructor(private _reService: IoRequestService) { }

并调用该方法，

  send() {
    _reService.sendMessage("txt");
  }

尝试访问我的服务中的函数时出错

2 个答案: