Angular - 为什么每次发出新值时都会调用 ngOnInit？

Question

I have a Subject called refreshSubject$ inside my service.

  private refreshUsers$ = new Subject<User[]>();

He is emitting a new value every time the user is added.

  saveUser(user: User[]) {
    return this.http.post<User>(this.url, user)
      .pipe(
        tap(() => {
          this.refreshUsers$.next();
        })
      );
  }

Im using a get method on my service to retrieve the value

  get refresh$() {
    return this.refreshUsers$;
  }

Now every time i add a new user, i emit a new value using the next() method.

  this.refreshUsers$.next();

Inside my component i have my life cycle hook ngOnInit that he is being called everytime the refreshUsers$ subject emits a new value.

  ngOnInit(): void {
    this.apiService.refresh$.subscribe(() => {
      this.getAllUsers();
    });
  }

Why ngOnInit is called every time i subscribe to a new value ?

Answer 1

In the onInit you are subscribed to your subject so everytime you emit a new value the method "this.getAllUsers()" will be runned. It doesn't matter if you are subscribed in the OnInit. A subscribe is alive until you unsubscribe.

Answer 2

Subscribe will get trigger every time an event is emitted does not matter where it sits. So your ngOnIt is not getting trigger every time an event is triggered but it's "subscribe", but since your's subscribe is inside "ngOnInIt" it will look like "ngOnInIt" is getting triggered. If you don't want this you can move out your subscribe outside ngOnInIt although it will not create a problem. Because other logic you have written inside ngOnInIt will not get triggered.

If you want to check for yourself you can add a console.log("testing") inside your ngOnInit but outside of subscribe. And emmit multiple event our will notice that 'testing' will be logged only once(when component loads)

Answer 3

It's not... the subscription callback is called everytime you emit a value, ie, this part:

() => {
      this.getAllUsers();
}

But you are not making a new subscription every time you emit a value.

That's how observables work