0

コンポーネント間の通信全体がサブジェクトとサブスクリプションに基づいている新しいAngular 6 WebAppに取り組んでいます。

サブスクリプション全体は、ダッシュボード コンポーネント (ルートの下のレベル 1) に実装されます。ダッシュボードでは、コンポーネントは SignalR Web ソケットを使用して C# ASP.NET Core バックエンドから生成されたテーブルです。

これで、このテーブルの各行に編集ボタンと削除ボタンが実装されました。編集ボタンは ngx-bootstrap Modal を開きます。モーダル オープニング関数は、param で 1 行の情報を取ります。

この「編集モーダル」内には、行の日付を含むいくつかの入力があります。変更を保存すると、データがダッシュボード コンポーネントに送り返され、.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 に答える