Javascript 有棱角的WebSocket仅在刷新页面时加载

我有一个角度的项目。它使用Socket.io和NodeJS显示mySQL数据库中的数据

该项目进展顺利，但我一直在尝试路由，发现WebSocket只在我最初加载网页时加载。如果我使用routing导航到某个组件并返回到第一个组件，该组件在表中显示WebSocket，则该表将消失

因此，我的主要问题是，如果我离开加载WebSocket的仪表板，然后返回WebSocket不再存在的位置

如果我查看“网络”选项卡，则在刷新页面之前不会加载WebSocket。然后它加载

在组件之间导航时是否可以添加刷新作为解决方法？这样做感觉有点糟糕

因此，我的dashboard.html中有来自websocket的数据，如下所示

<ng-container *ngFor="let project of localData; first as isFirst">
  <div *ngIf="isFirst" class="row">
    <div class="col">
      <table class="table table-bordered">
        <thead class="bg-dark text-light">
        <tr>
          <th>Id</th>
          <th>Title</th>
          <th>Price</th>
          <th>Quantity</th>
        </tr>
        </thead>
        <tbody>
        <tr >
          <td>{{ project.id }}</td>
          <td>{{ project.title }}</td>
          <td>{{ project.price }}</td>
          <td>{{ project.quantity }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</ng-container>

如果有帮助的话，我还将包括我的socket.service

@Injectable({
  providedIn: 'root'
})
export class SocketService {

  constructor(private socket: Socket) { }

  getInitialData() {
    return this.createObserver('initial');
  }

  getUpdatedData() {
    return this.createObserver('update');
  }

  private createObserver(event: string) {
    return this.socket.fromEvent(event);
  }

最后，我的路由模块以防万一

// Creating routes to components that can be linked to in html files
const routes: Routes = [{
  path: '',
  component: DefaultComponent,
  children: [{path: '', component: DashboardComponent},
    {path: 'device1', component: Device1Component},
  ]
},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我还应该补充一点——我设置的WebSocket连接的一个特性是，如果我编辑数据库，更改会实时反映出来。当我离开时，WebSocket表消失了。如果我在mySQL中编辑某些内容，它将重新出现。因此，连接仍然处于活动状态

// Creating routes to components that can be linked to in html files
const routes: Routes = [{
  path: '',
  component: DefaultComponent,
  children: [{path: '', component: DashboardComponent},
    {path: 'device1', component: Device1Component},
  ]
},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }