Angular 4订阅方法调用多次

我正在创建一个全局模态组件。 我的问题是，当我调用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');
  });
}

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

---

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

private退订：主题=新主题（）；
构造函数（专用modalService:modalService）{
this.modalService.getModal（）
.takeUntil（此.取消订阅）
.订阅（（模式：模式）=>{
this.modal=modal；
控制台日志（模态）；
});
}
恩戈尼尼特（）{
}
恩贡德斯特罗（）{
this.unsubscribe.next（）；
此为.unsubscribe.complete（）；
}

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

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

这确保Angular在组件销毁时自行清理订阅

对于订阅，在创建模式时，可以使用

take

操作符，如果发出x值，则完成订阅

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

---

我假设您只需要1个值（因为这是一个简单的对话框）。

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

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

---

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

感谢您的建议，但仍然不起作用。在Ngondestry lifecyclehook或通过

takeWhile

或

takeUntil

在组件构造函数内部订阅而不清理组件构造函数是一种不好的做法。这更多的是对其多个订阅触发进行故障排除。不管怎样，说得对。更新。可能您的应用程序尚未导入所有运算符，您可以使用：

import'rxjs/add/operator/take'导入运算符谢谢，您的代码正在运行，take（）方法成功了。但是，如果我单击按钮两次，模式将弹出。有什么想法吗？第二种方法是显示错误，类型Observable没有属性Observators。
...
export class ModalComponent implements OnInit, OnDestroy {
  public modal: Modal;

  constructor(private modalService: ModalService){}

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

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