Angular 4 Subscribe方法调用多次 [英] Angular 4 Subscribe method call multiple times

问题描述

im创建一个全局模态组件. 我的问题是，当我调用subscribe方法时，它会根据调用的模态数多次调用. 如何防止可观察的订阅方法多次调用?请在下面检查我的代码.预先感谢.

im creating a global modal component. My problem is when i call the subscribe method it call multiple times base on the number of the modal was called. How can i prevent mutiple calls on observable subscribe method? Please check my code below. Thanks in advance.

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

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

Here is the screenshot of the output on the console log. console log output

推荐答案

我认为在模态组件内部使用 async 管道会更容易:

I think i would be easier to use the async pipe inside your modal component:

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会在销毁组件时自行清理订阅.

This ensures that Angular is cleaning up the subscription by itself on component destruction.

对于创建模态的订阅，您可以使用take运算符，如果发出x值，则该运算符将完成订阅.

For your subscription when creating the modal you can use the take Operator, which completes the subscription if x values where emitted.

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

我假设您只想要1个值(因为它是一个简单的对话框).

I'm assuming you only want 1 value (as its a simple dialog).

这篇关于Angular 4 Subscribe方法调用多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！