Angular 4 Subscribe 方法多次调用

Question

我正在创建一个全局模态组件。我的问题是当我调用 subscribe 方法时，它会根据调用的模态数多次调用。如何防止对 observable subscribe 方法的多次调用？请在下面检查我的代码。提前致谢。

modal.model.ts

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

模态服务

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();
  }
}

模态组件

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');
  });
}

这是控制台日志上输出的屏幕截图。 控制台日志输出

Answer 1

我认为我会更容易在模态组件中使用异步管道：

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 个值（因为它是一个简单的对话框）。

Answer 2

只是不要忘记在您的组件被销毁时取消订阅 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 ，您也会删除订阅。

或者更好的是，基本上每次订阅时，您都会创建一个新的 observable，但是您可以重用您创建的第一个 observable，应用简单的验证（注意，在这种情况下您不应该使用 unsubscribe）。例如。

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

有很多方法可以不止一次地阻止触发订阅者。