如何在每次打开组件时调用函数? [英] How to call a function eveytime a component is opened?

问题描述

我有一个连接到 firebase 数据库并下载所有项目的应用程序，然后这些项目显示在如下表格中:

此表仅在我登录时显示，但一旦我移动到另一个组件并返回到带有表的组件，数据就不再加载.

我认为这是因为我在 onInit() 函数中有以下代码:

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

基本上只是读取数据并将其添加到数组中.然后如果数组长度 > 0，则数据显示在表格中:

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

我试图通过使用

来解决这个问题

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

但没有任何改变.那么.. 有没有办法在每次加载组件时调用函数，或者我的问题与另一件事有关?

解决方案

既然我的评论给了你解决方案，我会详细说明答案.

所有继承 Observable 的类(Subject、BehaviourSubject、ReplaySubject 和当然 Observable 本身)本质上都是一个你订阅的流，它会记住你的回调，直到你取消订阅.

因此，最终取消订阅任何订阅非常重要.

除非:一些 Observable 是从内部关闭的.在示例中所有 HttpClient 动词.(获取，发布，放置..)

至少有三种方法可以跟踪您的组件订阅，对于一两个订阅来说，最简单的一种方法是将它们保存在一个变量中，您可以在适当的时候取消订阅.

//跟踪订阅的变量taskSubscription:订阅；//创建订阅ngOnInit(){this.taskSubscription = this.taskService.getTasks().subscribe(tasks => this.tasks);}//在组件销毁时调用订阅变量的取消订阅ngOnDestroy(){this.taskSubscription.unsubscribe();}

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?

解决方案

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();
  }

这篇关于如何在每次打开组件时调用函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！