Angular-在每次呼叫中重復多次訂閱回應

目標： 我正在使用一項服務。目標是創建一個服務，該服務將用作確認對話框的創建，并將回傳是否在彈出視窗中單擊了確認或取消。

代碼：

product.component.html

<button class="edit-button" (click)="confirmFeatureProductDialog(data)">Confirm</button>

product.component.ts

  confirmFeatureProductDialog(product){
    let message = "Do you want to set this product?";
    let result;
    this._popupDialogService.confirmationPopup(message).subscribe(
      (res)=>{
        console.log("Running")
        result = res;
        if(result){
          this.featureProduct(product._id);
        }
      }
    );
  }

popupDialog.service.ts

import { Injectable } from "@angular/core";
import { Observable, Subject } from "rxjs";
import Swal from 'sweetalert2'

Injectable();
export class PopupDialogService {

    public mySubject = new Subject<boolean>();

    confirmationPopup(textDetail?): Observable<any> {
        Swal.fire({
            title: 'Are you sure?',
            text: textDetail,
            icon: 'success',
            showConfirmButton: true,
            showCancelButton: true,
        }).then((result) => {
            if (result.value) {
                this.mySubject.next(true);
                return;
            }
            Swal.close();
        });
        return this.mySubject.asObservable();
    }
}

結果與問題：

當我第一次運行它時，一切似乎都運行良好。

當我在單擊取消或確認后第二次product.component.ts單擊按鈕時，來自 的回應被重復兩次，即來自訂閱回應的 console.log 被重復兩次，并且 console.log 顯示"Running" "Running"。

當我第三次單擊按鈕時（一旦單擊確認/取消后對話框關閉），回應重復三次，控制臺顯示"Running"3 次。

到目前為止我嘗試過的事情：

將服務添加到 app.module.ts 提供程式而不是 product.module.ts 提供程式。不會改變任何東西。

檢查是否在第 2 次及以后的執行中多次呼叫服務的建構式。它不會執行多次。只有訂閱回應被多次執行。

概括：

在從服務回傳 observable 的函式上運行訂閱。第一次訂閱的回應是好的，但是當第二次重新打開該函式時，它會拋出兩次回應，關閉并重新運行該函式后會給出三次回應，依此類推。

uj5u.com熱心網友回復：

您多次訂閱同一個主題，而沒有取消訂閱之前的訂閱。

在 init 上訂閱主題并從服務中洗掉可觀察的回傳

// component code

ngOnInit() {
  let result;
  this._popupDialogService.mySubject.subscribe(
    (res)=>{
      console.log("Running")
      result = res;
      if(result){
        this.featureProduct(product._id);
      }
    }
  );
}

confirmFeatureProductDialog(product){
  let message = "Do you want to set this product?";
  this._popupDialogService.confirmationPopup(message)
}

// Service code

confirmationPopup(textDetail?) {
    Swal.fire({
        title: 'Are you sure?',
        text: textDetail,
        icon: 'success',
        showConfirmButton: true,
        showCancelButton: true,
    }).then((result) => {
        if (result.value) {
          console.log(result)
            this.mySubject.next(true);
            return;
        }
        Swal.close();
    });
}

uj5u.com熱心網友回復：

這個問題是由于觀察者而發生的this._popupDialogService.confirmationPopup(message)

您需要在產品組件中宣告訂閱：

subscription!: Subscription

confirmFeatureProductDialog(product){
    let message = "Do you want to set this product?";
    let result;
    this.subscription =this._popupDialogService.confirmationPopup(message).subscribe(
      (res)=>{
        console.log("Running")
        result = res;
        if(result){
          this.featureProduct(product._id);
        }
      }
    );
  }

在 ondestory 生命周期鉤子中取消訂閱它。

ngOnDestroy() {
        this.subscription.unsubscribe()
    }

uj5u.com熱心網友回復：

嘗試更改您的方法，例如：

sub: Subscription;
confirmFeatureProductDialog(product){
    let message = "Do you want to set this product?";
    let result; 
    this.sub = this._popupDialogService.confirmationPopup(message).subscribe(
      (res)=>{
        console.log("Running")
        result = res;
        if(result){
          this.featureProduct(product._id);
        }
        this.subs.unsubscribe();
      }
    );
}

它可以解決您的問題，但我認為在您的情況下，您需要一種不同的方法來解決問題。也許使用這樣的服務會更好：

export class DialogService {

  dialogConfig: EventEmitter<DialogConfig> = new EventEmitter(null);
  afterClosed: EventEmitter<DialogResponse> = new EventEmitter(null);

  constructor() { }

  /** OPEN DIALOG DEFINED IN APP.COMPONENT.HTML
   * 
   * @title define the optional title of a dialog (title to translate with pipe translate)
   * @action action define the action component to use
   * @message define the message of a dialog (message to translate with pipe translate)
   * 
  */
  open(title: string, action: string, message?: string, params?: Object): EventEmitter<DialogResponse> {
    this.afterClosed = new EventEmitter(null);
    this.dialogConfig.emit({
      visibile: true,
      title,
      action,
      message,
      params
    });
    return this.afterClosed;
  }

  /** CLOSE DIALOG DEFINED IN APP.COMPONENT.HTML */
  close(res: boolean, note?: string) {
    this.dialogConfig.emit({ visibile: false });
    note ? this.afterClosed.emit({ response: res, note: note }) : this.afterClosed.emit({ response: res });
  }

}

在你的組件中使用這樣的打開：

this.dialog.open("title", "action", "message").subscribe(res => {
   ...stuffs
})

并關閉：

this.dialog.close(true | false)

標籤：javascript有角度的打字稿承诺订阅

上一篇：使用PrimeFlex將<span>專案放在右側

下一篇：是否可以從訂閱回傳值？