Angular 4 订阅方法多次调用

Question

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

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

这是控制台日志输出的屏幕截图。 console log output

Answer 1

将您的订阅移至ctor。例如：

    private unsubscribe: Subject<void> = new Subject<void>();

    constructor(private modalService: ModalService){
        this.modalService.getModal()
          .takeUntil(this.unsubscribe)
          .subscribe((modal: Modal) => {
               this.modal = modal;
               console.log(modal);
        });
    }

    ngOnInit() {

    }

    ngOnDestroy() {
         this.unsubscribe.next();
         this.unsubscribe.complete();
    }

Answer 2

我认为在模态组件中使用 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 个值（因为它是一个简单的对话框）。

Answer 3

只是不要忘记在您的组件被销毁时取消订阅 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);
    });
}

有很多方法可以防止多次触发订阅者。

Angular 4 订阅方法多次调用

Angular 4 Subscribe method call multiple times

rxjs

typescript2.0

angular