0

我只是在开发一个新的 Angular 6 WebApp，它的组件之间的整个通信都是基于主题和订阅的。

整个订阅在仪表板组件（根目录下的级别 1）中实现。在仪表板上，组件是从带有 SignalR Web 套接字的 C# ASP.NET Core 后端生成的表。

现在我们为该表中的每一行实现了编辑和删除按钮。编辑按钮打开一个 ngx-bootstrap 模态。模态打开函数在参数中采用单行信息。

在这个“编辑模式”里面是一些带有行日期的输入。现在，当我保存更改时，数据将被发送回仪表板组件，该组件使用 .NET Core API 为行调用更新方法。

在编辑模式和仪表板之间的这个数据流中，我的订阅调用了 4 次。

我试图调试这个，但没有找到任何线索这里发生了什么......

我的通信服务：

export class CommunicationService {

  private subject = new Subject<any>();

  constructor() { }

  sendData(data: any) {
    this.subject.next({ data });
  }

  removeData() {
    this.subject.next();
  }

  getData(): Observable<any> {
    return this.subject.asObservable();
  }

}

编辑模式：

sendOrderToDashboard(): void {
    // this.order is a data of singel row. Its a table with different user orders as a row.
    this.communicationService.sendData(this.order);
    this.modalRef.hide();
  }

仪表板组件

public ngOnInit(): void {
    this.communicationService.getData().subscribe(orderToUpdate => {
      if (orderToUpdate) {
        this.updateOrder(orderToUpdate.data);
        console.log(orderToUpdate.data);
        // this log invokes 4x times
      }
    });
  }

updateOrder(order): void {
    this.orderService.updateOrder(order).subscribe(next => {
      console.log('updated successfully');
      // This log is never executed even when the update is successful
    }, error => {
      console.log('error while updating order');
    });
  }

更新 OrderService 中的订单（Angular 和 SignalR（后端）之间的桥梁）

  public updateOrder(order: Order): Observable<Order> {
    if (!this.orderSubjects[order.id]) {
      this.orderSubjects[order.id] = new Subject<Order>();
    }

    this.hubService.invoke(ServerMethod.UpdateOrder, order);

    return this.orderSubjects[order.id].asObservable();
  }

有人知道为什么我的成功日志从未执行过并且我的调用次数为 4 次吗？

4

3 回答 3

0

每次在 DashBoardComponent 中使用 ngOnDestroy 方法时都需要取消订阅。

仪表板组件

private subscription:

updateOrder(order): void {
    if(this.this.subscription){
      this.subscription.unsubscribe();
    }
    this.subscription = this.orderService.updateOrder(order).subscribe(next => {
      console.log('updated successfully');
      // This log is never executed even when the update is successful
    }, error => {
      console.log('error while updating order');
    });
  }

ngOnDestroy(){
   if(this.this.subscription){
      this.subscription.unsubscribe();
   }
}
于 2018-09-07T07:44:17.913 回答
0

在您的仪表板组件中，我看不到导出类表达式，请检查您是否实现了OnDestroy.

你的班级应该是这样的

import { Component, OnInit, OnDestroy } from '@angular/core';
export class DashboardComponent implements OnInit, OnDestroy {
    ngOnDestroy(){
       if(this.this.subscription){
          this.subscription.unsubscribe();
       }
    }
    // the rest of your code
}

如果你不实现它，你只是在创建一个调用的函数ngOnDestroy，除非你手动调用它，否则它不会被执行。

于 2019-01-08T01:15:20.217 回答
0

出于调试目的，我在仪表板组件中添加了更多日志。我已经unsubscribe()在我的订阅中添加了一个，ngOnDestroy()但是这个方法从未被执行过。

updateOrder(order): void {
    console.log('update method is called')
    this.subscription = this.orderService.updateOrder(order).subscribe(next => {
      console.log('updated successfully');
    }, error => {
      console.log('error while updating order');
    });
  }

  public ngOnInit(): void {
    console.log('data is available now');
    this.communicationService.getData().subscribe(orderToUpdate => {
      if (orderToUpdate) {
        this.updateOrder(orderToUpdate.data);
        console.log('update init');
        console.log(orderToUpdate.data);
      }
    });
  }

  public ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
      console.log('successfuly unsubscribe');
    }
  }

似乎整个组件被初始化了 2 次？并且取消订阅永远不会执行。我在下面添加了一个屏幕截图console.log

控制台日志

于 2018-09-07T08:50:40.950 回答