Тема подписки запускается дважды, когда я вызываю .next () один раз в приложении Angular - PullRequest
Новая
       27

Тема подписки запускается дважды, когда я вызываю .next () один раз в приложении Angular

0 голосов
/ 30 декабря 2018

Я пытаюсь создать модальный компонент многократного использования.в ModalService у меня есть субъект и метод, который вызывает next () для субъекта.ModalComponent подписывается на эту тему, но всякий раз, когда вызывается метод в сервисе, следующая функция наблюдателя получает триггеры дважды.Кто-нибудь знает, что вызывает это? 

export class ModalService { 
  openModal = new Subject(); 

  constructor() { } 

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

Модальный компонент: 

export class ModalComponent implements OnInit {
  component: 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);
    });
  }

1 Ответ

0 голосов
/ 30 декабря 2018

Непонятно в вашем вопросе, где и как вызывается метод open().Это open(), вызываемый дважды или subscribe(), запускаемый дважды?

Но если вы хотите поделиться последним значением с подписчиками, вы можете использовать shareReplay() в pipe() следующим образом: 

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

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

ОБНОВЛЕНИЕ

И в вашем модальном компоненте вам необходимо unsubscribe из наблюдаемого при навигации по нему.Вы можете сделать это двумя способами.

Первый путь: 

 modalSubscription: Subscription;

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

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

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

Второй путь: 

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

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

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

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

Я предпочитаю второй способ в основном.Таким образом, вы можете отписаться от нескольких наблюдаемых одновременно.

...