web-dev-qa-db-ja.com

Angular 4サブスクライブメソッド呼び出しを複数回

グローバルモーダルコンポーネントを作成しています。私の問題は、サブスクライブメソッドを呼び出すと、モーダルが呼び出された回数に基づいて複数回呼び出されることです。監視可能なサブスクライブメソッドで複数の呼び出しを防ぐにはどうすればよいですか？以下の私のコードを確認してください。前もって感謝します。

modal.model.ts

export class Modal {
  title: string;
  message: string;
  visible: boolean = false;
}

modal.service

import { Injectable } from '@angular/core';
import { Modal } from './modal.model';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ModalService {
  static readonly YES = 1;
  static readonly NO = 0;

  private modal = new Modal();
  private subject = new Subject<Modal>();
  private action = new Subject<number>();

  confirmationDialog(message) {
    this.modal.title = 'Confirmation';
    this.modal.message = message;
    return this;
  }

  show() {
    this.modal.visible = true;
    this.setModal(this.modal);
    return this;
  }

  setAction(action: number) {
    this.action.next(<number>action);
  }

  getAction(): Observable<any> {
    return this.action.asObservable();
  }

  setModal(alert: Modal) {
    this.subject.next(<Modal>alert);
    return this;
  }

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

modal.component

import { Component, OnInit } from '@angular/core';
import { ModalService } from './modal.service';
import { Modal } from './modal.model';

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  public modal: Modal;

  constructor(private modalService: ModalService){}

  ngOnInit() {
    this.modalService.getModal().subscribe((modal: Modal) => {
      this.modal = modal;
      console.log(modal);
    });
  }

  no() {
    this.modalService.setAction(0);
    this.modalService.close();
  }

  yes() {
    this.modalService.setAction(1);
    this.modalService.close();
  }
}

モーダルコンポーネントを呼び出す

showModal() {
  this.modalService.confirmationDialog('Are you sure you want to save this record?').show();
  this.modalService.getAction().subscribe(response => {
    if(response === ModalService.NO) {
      return;
    }
    console.log('call mutiple times');
  });
}

これは、コンソールログの出力のスクリーンショットです。 コンソールログ出力

angularrxjstypescript2.0
4
Juan

私はあなたのモーダルコンポーネント内でasyncパイプを使用する方が簡単だと思います：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

import { ModalService } from './modal.service';
import { Modal } from './modal.model';

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  public modal$: Observable<Modal>;

  constructor(private modalService: ModalService){
      this.modal$ = this.modalService.getModal();
  }

  no() {
    this.modalService.setAction(0);
    this.modalService.close();
  }

  yes() {
    this.modalService.setAction(1);
    this.modalService.close();
  }
}

そして、あなたのテンプレートの中で例えば：

(modal$ | async)?.title

これにより、Angularがコンポーネントの破棄時にサブスクリプションを単独でクリーンアップします。

モーダルを作成するときのサブスクリプションには、take演算子を使用できます。これにより、x値が出力された場合にサブスクリプションが完了します。

this.modalService.getAction().take(1).subscribe(response => {
    if(response === ModalService.NO) {
      return;
    }
    console.log('call mutiple times');
});

（単純なダイアログとして）1つの値だけが必要であると想定しています。

2
cyr-x

コンポーネントが破棄されたら、必ずmodalServiceの購読を解除することを忘れないでください。

...
export class ModalComponent implements OnInit, OnDestroy {
  public modal: Modal;

  constructor(private modalService: ModalService){}

  public ngOnDestroy(): void {
    this.modalService.unsubscribe(); // or something similar
  }
}

発生する可能性があるのは、モーダルを開くたびにサブスクリプションが永続化され、+ 1回実行されることですが、モーダルが閉じられたり破棄されたりしたときにdestroyを使用すると、サブスクリプションも削除されます。

あるいは、基本的には、サブスクライブするたびに新しいオブザーバブルを作成しますが、最初の作成を再利用して簡単な検証を適用することもできます（この場合、サブスクライブを使用しないでください）。例えば。

if (this.modalService.getModal().observers.length === 0) {
    this.modalService.getModal().subscribe((modal: Modal) => {
        this.modal = modal;
        console.log(modal);
    });
}

トリガーされたサブスクライバーを複数回防止するには、多くの方法があります。

0
Jack Fiallos