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

我想我会更容易在你的模态组件中使用 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 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，您也会删除订阅。

>

甚至更好的是，基本上，每次订阅时，您都在创建一个新的可观察对象，但是您可以重复使用您创建的第一个对象，并应用简单的验证（注意，在这种情况下，您不应该使用取消订阅）。例如。

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

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

Answer 3

将您的订阅移至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();
    }

Angular 4订阅方法多次调用

3 个答案: