每次打开组件时如何调用函数？

Posted 2023-03-13

【中文标题】每次打开组件时如何调用函数？

【英文标题】：How to call a function eveytime a component is opened?

【发布时间】：2018-08-19 18:52:17

【问题描述】：

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

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

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

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

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

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

我试图通过使用来解决这个问题

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

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

【问题讨论】：

你能搞定那个吗？？

您的代码应该在 ngOnInt() 中，这是正确的！你错过了别的东西。你在改变路线吗？

是的，当我从导航栏中单击一个按钮时，另一个组件被加载，我将我的 repo 上传到 github

酷分享链接......

注意到您没有在 ngOnDestroy() 中保存和清理您的订阅。这可能会有所帮助，具体取决于您的服务使用的可观察对象类型。

【参考方案1】：

好的，在查看所有事件之后，我认为您会使用此事件ngAfterViewChecked。这样，您可以在每次检查视图时执行您的函数。此外，ngOnInit 仅在应用程序加载时工作一次，之后将不再执行。使用ngAfterViewChecked。再次，请查看我给你的链接！

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

【讨论】：

看这个资料link

也不行，需要重新加载页面才能加载信息

另外，您可以使用ngAfterContentChecked 或ngDoCheck

没有改变，同样的问题 :(

我不太确定，也许 angular 事件正在起作用，但您的服务有问题。拜托，你说你有你的项目的回购。可以分享一下吗？

【参考方案2】：

正如@jornara 指出的那样，我应该在 ngOnDestroy() 中使用 unsubcribe()，如下所示：

  //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】：

由于我的评论给了你解决方案，我会详细说明答案。

所有继承 Observable 的类（Subject、BehaviourSubject、ReplaySubject 和 Observable 本身）本质上是一个您订阅的流，它会记住您的回调，直到您取消订阅。

因此，最终退订任何订阅非常重要。

除非： 一些 Observable 是从内部关闭的。例如所有的 HttpClient 动词。 （获取、发布、放置..）

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

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