时间戳

首页 > 解决方案 > Angular 数据服务被调用两次

angular - Angular 数据服务被调用两次

问题描述

我有一个 Angular 7 应用程序在调用服务两次时遇到问题。

我有多个连接到 websocket 的 observables。在套接字中，我正在监听不同的事件发生并执行适当的操作。

app.module.ts

import { DataService } from './data.service';
....
providers: [
  DataService
],

one.component.ts

import { DataService } from './data.service';
....
constructor(private data: DataService) { }
....
ngOnInit() {
  this.data.receiveMessage().subscribe(msg => {
    this.msg = msg;
  });
}

两个.component.ts

import { DataService } from './data.service';
....
constructor(private router: Router, private data: DataService) { }
ngOnInit() { }
....

数据服务.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as io from 'socket.io-client';

@Injectable()
export class DataService {
    receiveMessage() {
      return new Observable(observer => {
        this.socket.on('sendMessage', msg => {
          observer.next(msg);
        });
      });
    }
    ....
    other observables
 }

如果我使用 Injectable provider root 也会发生同样的事情。

我在应用程序中使用了其他可观察对象，但这只是我在 OnInit 中使用的一种方法，但将其取出会导致应用程序停止工作。

标签： angular

解决方案

在 app.component.html 中添加，导致整个应用程序呈现两次

推荐阅读