Angular 订阅仅在页面刷新时加载在组件之间导航时不是

如何解决Angular 订阅仅在页面刷新时加载在组件之间导航时不是

我有一个带有仪表板的 Angular 应用程序和一些可以通过路由器链接导航到的组件。

例如仪表板设备

路由工作正常，我唯一的问题是当我在组件之间路由时，我的 ngOninit 中的订阅没有加载。它只在页面刷新时加载。我已经把它缩小到这段没有加载的代码。此代码在我的 device1.componenet.ts 中

 private subs: Subscription[] = [];
  localData: any[] = [];

  constructor(private socketService: SocketService) {
  }

  ngOnInit() {
    console.log('onInit');
    this.subs.push(
      this.socketService.getinitialData().subscribe((data: ServerResponse) => {
        this.localData = data.prods;
        console.log('Subbed2');
      })
    );

console.log('Subbed2');重新加载页面时显示在控制台中，但在组件之间导航时不显示。

知道为什么此订阅不适用于路由吗？

正在订阅 socket.service.ts 的服务

export class SocketService {

  constructor(private socket: Socket) { }

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


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

2 个主要组件是仪表板和设备 1。显示订阅的设备 1。仪表板没有什么特别的，只是一些视觉效果和一个链接到设备组件的链接。

device1.componenet.ts

@Component({
  selector: 'app-devices',templateUrl: './device1.component.html',styleUrls: ['./device1.component.css']
})
export class Device1Component implements OnInit,OnDestroy {

  devices: Devices[] = [];
  // Devices array from devices.ts
  dataSource = new MatTableDataSource(DEVICES);
  displayedColumns: string[] = ['position','name','serialNo','actions'];
  private subs: Subscription[] = [];
  localData: any[] = [];

  constructor(private socketService: SocketService) {
  }

  ngOnInit() {
    console.log('onInit');
    this.subs.push(
      this.socketService.getinitialData().subscribe((data: ServerResponse) => {
        this.localData = data.prods;
        console.log('Subbed2');
      })
    );

    this.subs.push(
      this.socketService.getUpdatedData().subscribe((data: ServerResponse) => {
        this.localData = data.prods;
        console.log('Sub2');
      })
    );
  }

  ngOnDestroy() {
    this.subs.forEach(s => s.unsubscribe());
  }
}

interface ServerResponse {
  prods: any[];
  type?: string;
}

app-routing.module.ts

// 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 { }

我使用侧边栏来处理路由

<a mat-list-item routerLinkActive="list-item-active" routerLink="/">Dashboard </a>
<a mat-list-item routerLinkActive="list-item-active" routerLink="/device1">Device1</a>
<a mat-list-item >Notifications </a>

解决方法

这可能是服务的错误，而不是组件的错误。

在第一次获取初始数据后尝试记录它：

class Device1Component {
  ngOnInit() {
    this.socketService.getInitialData().subscribe((data: ServerResponse) => {
      this.localData = data.prods;
      console.log('true initial');

      this.socketService.getInitialData().subscribe((data: ServerResponse) => {
        console.log('test initial');
      });
    });
  }
}

在我们知道这是什么死后，我们可以跟进

因此，在这种情况下，问题在于我的服务器端代码仅在初始连接时发出数据表。

我通过创建一个在创建组件时触发的函数来解决：

ngOnInit() {
    this.socketService.emitSomething();

在我的套接字服务中：

emitSomething(){
    this.socket.emit('something');
}

服务器收到此消息后发送数据：

socket.on("something",arg => {
    console.log("eSomething was emitted")
    io.sockets.emit('initial',{prods: [...data]});
});

这可能更像是一个黑客而不是一个有效的解决方案。很乱，但我会在了解更多信息后将其整理好。

另外，我想感谢所有评论的人，主要是因为即使他们不是一个确切的答案，每个人都帮助我调试了路由原因并提出了这个“黑客”。