Subscribe calling multiple time angular

Question

I have this navigation bar

  <span (click)="routing('settings')">
       Settings
  </span>

in ts file

 routing(data) {
    let jsons = {
      UserId: this.UserId,
      Nav: data,
    };
    this.Service.List.next(jsons);
  }

in service file

List= new BehaviorSubject<any>('');

when i click on settings menu subscribe it in next component oninit method

ngOnInit(): void {
 this.Service.List.subscribe(response => {
       console.log('function called ');
 } 
}

Issue is sometime ngOnInit is not called still subscribe method is called multiple times upto 10-15 times, i want to resolve this issue if i click on navigation bar link it should subscribe only once, this happend only when subscribe gets called before ngOninit.

Any solution Thanks

Unclear question, I guess you just need to unsubscribe in ngOnDestroy. — Petr Averyanov
– Petr Averyanov, Commented Jan 2, 2023 at 16:46

Michael Kang · Accepted Answer · 2023-01-02 17:05:41Z

2

Since your service has a longer lifetime than your component, you have to cleanup your subscriptions every time your component gets destroyed:

destroy$ = new Subject<void>()
ngOnInit(): void {
 this.Service.List.pipe(takeUntil(this.destroy$)).subscribe(response => {
       console.log('function called ');
 } 
}
ngOnDestroy(): void {
   this.destroy$.next()
}

ngOnInit and ngOnDestroy are guaranteed to be called exactly once per component lifetime.

answered Jan 2, 2023 at 17:05

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Behram Bazo · Accepted Answer · 2023-01-03 05:52:29Z

1

I think in that case you can use RxJs take operator.

this.Service.List.pipe(take(1)).subscribe(response => {
  console.log(response);
});

answered Jan 3, 2023 at 5:52

Behram Bazo

2882 silver badges6 bronze badges

1 Comment

user3653474 Over a year ago

Thanks i tried it with take('1') then subscribe was not working then changed value to take(5) then it is working, what changes i have to make in my code

Evgeny Gurevich · Accepted Answer · 2023-01-04 20:16:16Z

0

Don't use any type. Use camelCase convention of variable names. In your service:

interface IData {
  userId: number;
  nav: string;   
}

class ListService {
  private list$ = new BehaviorSubject<IData>(null);
  getList(): Observable<IData> {
    return this.list$.asObservable().pipe(sharedReplay(1));
  }
  setList(data: IData): void {
    this.list$.next(data);
  }
}

In .ts file:

routing(nav: string): void {
  const jsons = {
     userId: this.UserId,
     nav,
  };
  this.service.setList(jsons);
}

In component class:

ngOnInit(): void {
  this.service.getList
    .subscribe(console.log); // your data
}

I guess it will help.

answered Jan 4, 2023 at 20:16

Evgeny Gurevich

6574 silver badges7 bronze badges

Collectives™ on Stack Overflow

Subscribe calling multiple time angular

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related