How to call a function eveytime a component is opened?

问题

I have an app which connects to a firebase database and download all items then the items are displayed in tables like this:

This table is only shown if Im logged in but as soon as I move to another component and return to the one with the tables, the data is not loaded anymore.

I think that's because I have the following code in onInit() function:

  ngOnInit() {
    this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
  }

Which basically just read the data and add it to an array. Then If the array length is > 0 the data is displayed in the tables:

<div *ngIf="tasks?.length > 0;else noTasks">
</div>

I tried to solve this by using

  ngOnChanges() {
    this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
  }

But nothing changes. So.. it's there a way to call a function everytime a component is loaded or my problem has to do with another thing?

回答1:

Since my comment gave you the solution, I'll elaborate on the answer.

All Classes that inherits Observable (Subject, BehaviourSubject, ReplaySubject and ofcourse Observable itself) is essentially a stream that you subscribe to, which remembers your callback until you unsubscribe.

It's therefore important to eventually unsubscribe from any subscription made.

UNLESS: Some Observables are closed from within. In example all the HttpClient verbs. (get, post, put..)

There are at least three ways of keeping track of your components subscriptions, and the easiest one for one or two subscriptions is to save them in a variable which you can unsubscribe when approperiate.

  //Variable to keep track of the subscription
  taskSubscription: Subscription;

  //Creating the subscription
  ngOnInit(){
    this.taskSubscription = this.taskService.getTasks()
        .subscribe(tasks => this.tasks);
  }

  //Calling unsubscribe on the subscription variable when the component is destroyed
  ngOnDestroy(){
    this.taskSubscription.unsubscribe();
  }

回答2:

As @jornara pointed out I should have used unsubcribe() inside ngOnDestroy() as follow:

  //Variable to keep track of the subscription
  sub: any;

  //Calling the subscription
  ngOnInit(){
    this.sub = this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
  }

  //Calling unsubscribe on the initial variable
  ngOnDestroy(){
    this.sub.unsubscribe();
  }

回答3:

Ok, after review all the events, I think you'd use this event ngAfterViewChecked. In this way, you can execute your function every time the view is checked. Also, ngOnInit just works once when the application is loaded, after that, it won't execute again. Use ngAfterViewChecked. Again, please review the link I give you!

ngAfterViewChecked() { 
this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
}

来源：https://stackoverflow.com/questions/49223594/how-to-call-a-function-eveytime-a-component-is-opened

标签

angular

angular5

ngoninit