javascript - Subject Subscription is triggered twice when I call .next() once in Angular app - Stack Overflow

admin管理员组

文章数量:1277362

i'm trying to create a reusable Modal ponent. in a ModalService i have a Subject, and a method that that calls next() on the subject. The ModalComponent subscribes to that subject, but whenever the method in the service is being called, the next function of the observer gets triggers twice. Anyone know what causes this?

export class ModalService { 
  openModal = new Subject(); 

  constructor() { } 

  open(cmp) { 
     this.openModal.next(cmp); 
   } 
}

Modal Component:

export class ModalComponent implements OnInit {
  ponent: ComponentRef<any>;

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private modalService: ModalService
  ) {}

  ngOnInit() {
    this.modalService.openModal.subscribe(cmp => {

      // CALLD TWICE EVRY TIME THE SERVICE CALLS .next()
      console.log(cmp);
    });
  }

i'm trying to create a reusable Modal ponent. in a ModalService i have a Subject, and a method that that calls next() on the subject. The ModalComponent subscribes to that subject, but whenever the method in the service is being called, the next function of the observer gets triggers twice. Anyone know what causes this?

export class ModalService { 
  openModal = new Subject(); 

  constructor() { } 

  open(cmp) { 
     this.openModal.next(cmp); 
   } 
}

Modal Component:

export class ModalComponent implements OnInit {
  ponent: ComponentRef<any>;

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private modalService: ModalService
  ) {}

  ngOnInit() {
    this.modalService.openModal.subscribe(cmp => {

      // CALLD TWICE EVRY TIME THE SERVICE CALLS .next()
      console.log(cmp);
    });
  }

• javascript
• angular
• rxjs
• rxjs6
• subject

Share Improve this question Follow asked Dec 30, 2018 at 15:24 ItaiItai 41711 gold badge88 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It is not clear in your question where and how open() method is called. Is it the open() called twice or subscribe() triggered twice?

But if you want to share the last value with the subscribers you could use shareReplay() in pipe() like this:

export class ModalService { 
  openModalSubject = new Subject(); 
  openModal = this.openModalSubject.asObservable().pipe(shareReplay());
  constructor() { } 

  open(cmp) { 
     this.openModalSubject.next(cmp); 
   } 
}

UPDATE

And in your modal ponent, you need to unsubscribe from the observable when navigating from it. You can do it two ways.

First Way:

 modalSubscription: Subscription;

 ngOnInit() {
    this.modalSubscription = this.modalService.openModal.subscribe(cmp => {
      console.log(cmp);
    });
  }

  ngOnDestroy(){
    this.modalSubscription.unsubscribe();
  }

Second Way:

 unsubscribeSignal: Subject<void> = new Subject();

 ngOnInit() {
    this.modalSubscription = this.modalService.openModal
    .pipe(
       takeUntil(this.unsubscribeSignal.asObservable()),
    )
    .subscribe(cmp => {
      console.log(cmp);
    });
  }

  ngOnDestroy(){
    this.unsubscribeSignal.next();
  }

I prefer the second way mostly. This way, you can unsubscribe more than one observable at once.

The best way is to push all subscriptions in the array and unsubscribe it into the ngondestroy.

First import the Subscription from rxjs
     import { Subscription} from 'rxjs';
    
second create global property in ponent     
     subscriptions: Subscription[] = [];
    
    
Third push all the subscribe in subscriptions property
    constructor(){
    this.subscriptions.push(this.Service.subject1.subscribe((result) => {
          console.log('subject1');
    
        }));
    
        this.subscriptions.push(this.dataService.subject2.subscribe((data) => {
        console.log('subject2')
    }
    
    
 Lastly unsubscribe it   
     ngOnDestroy() {
       
        this.subscriptions.forEach(sub => sub.unsubscribe());
    
    
      }

本文标签： javascriptSubject Subscription is triggered twice when I call next() once in Angular appStack Overflow