English 中文(简体)
页: 1 io
原标题:Angular 17 not rendering a component with Socket.io

我有以下安热部分,其唯一财产是Connectionservice服务:

import { Component } from  @angular/core ;
import { CommonModule } from  @angular/common ;
import { ConnectionService } from  ./connection.service ;
//import { inject } from  @angular/core ;

@Component({
  selector:  app-root ,
  standalone: true,
  imports: [CommonModule],
  templateUrl:  ./app.component.html ,
  styleUrls: [ ./app.component.css ]
})
export class AppComponent {
  // is the same with conn = inject(ConnectionService)
  constructor(private conn: ConnectionService) {}
  ...
}

相应的模板是:

<div>
  <div>
    <div> Site id: <input placeholder="Insert a value"> <button > SET </button> </div>
    <textarea #myTextarea cols="40" rows="5"> </textarea>
  </div>
</div>

这里是Connectionservice服务守则:

import { Injectable } from  @angular/core ;
import { Socket, io } from  socket.io-client ;
import { ServerToClientsEvent, ClientToServerEvent, OTSocketClient } from  ../../../../Server/typings ;

@Injectable({
  providedIn:  root 
})
export class ConnectionService {
  socket: Socket<ServerToClientsEvent, ClientToServerEvent>;
  client!: OTSocketClient;
  constructor() {
    this.socket = io("http://localhost:3002/");
    this.socket.on("connect", () => {
      this.connectionService.client = new OTSocketClient(this.socket);
      console.log(`Client ${this.socket.id} connected`);
      this.connectionService.client.askDoc();
    })
  }
}

问题是,当我开始使用ng=提出申请时。 第html号构成部分没有完成,该网页无休止地装载。 这可能是由于备案。 io Library, 即使增加了console.log 我可以看到,这一联系是成功的,而且emit方法的工作是成功的。

第一部分:导言

import { Component } from  @angular/core ;
import { CommonModule } from  @angular/common ;

let socket = io("http://localhost:3002/");
let client = new OTSocketClient(socket);
socket.on("connect", () => {
   console.log(`Client ${socket.id} connected`);
   client.askDoc();
})

@Component({
  selector:  app-root ,
  standalone: true,
  imports: [CommonModule],
  templateUrl:  ./app.component.html ,
  styleUrls: [ ./app.component.css ]
})
export class AppComponent {
  constructor() {}
  ...
}

模板已经提供,但我可以有把握地知道,在实行班级声明之前,守则在“-ructorstrongInit()”方法中加入,但我发现我前面谈到的同一问题。 因此,我试图增加一个服务,但错误依然存在。

问题回答

我有同样的问题。 我在我的服务中采用了一种方法,然后,我从零头的角度来看待这个方法。 它确保你只有在需要时才能连接起来。





相关问题
How to show some animation while control is rendering?

I have WPF ListBox that shows a lot of data. I need smooth scrolling, so I ve set ListBox.ScrollViewer.CanContentScroll to False that disables virtualization. Now when I open the tab where this ...

Font Rendering between Mozilla and webkit

I m not sure if this has anything to do with the recent Safari update, but I m beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts. for instance, ...

How to render a printable image from a SWF

I m working on a project at the moment where the client uses an off-the-shelf Flash library to display data against a map. It s a SWF that we feed some XML data and it renders it in various ways, such ...

Load image into memory immediately

I need to open all frames from Tiff image in WPF into memory and then delete the source. And after that I eventually need to render that image (resized according to window size). My solution is quite ...

JSP programmatically render

I need to programmatically render JSP page. As far as I understand, JSP should have some compiler. The question is can I use this compiler dirrectly without JspServlet and others? All I need is ...