如何在Angular中自动刷新页面

如果我的页面打开，我想自动重新加载页面自动回发以重新加载表数据。为此，我写了一些代码，但这是不工作的。请参阅下面的代码

import { Component, OnInit } from '@angular/core';
import { Observable,Subscription, interval  } from 'rxjs';

export class ProductsComponent implements OnInit {
  private updateSubscription: Subscription;

  ngOnInit() {
     this.updateSubscription = interval(3000).subscribe(
     (val) => { this.getProducts()});

    });
  }

  private getProducts()
  {
    this.employeeService.getProducts().subscribe((data:any) => {
      console.log(data);
     this.products=data;});

  }

}

getProducts调用RESTAPI。我怎样才能让它工作？

试试：

import { Observable, interval, Subscription } from 'rxjs';

export class YourComponent ... {

  private updateSubscription: Subscription;

  ngOnInit() {
      this.updateSubscription = interval(1000).subscribe(
        (val) => { this.updateStats()
      }

  );
}

---

如果重新加载只对您而不是用户重要，那么您可以使用

ng serve --poll=2000

---

这样，您的项目将在每次更改代码中的某些内容或每2秒更新一次。但是如果完全没有任何变化，它也不会更新，我想他会很好地认识到这一点。

尝试调用组件构造函数

 constructor(){

       Observable.interval(1000)
        .subscribe((val) => { console.log('called'); 
    this.getProducts();
    });
    }

---

给出了对我有用的有问题的代码。起初，我在等待页面重新加载。但当我将调试点放在检查过的元素中时，我的代码执行的每个间隔都是

import { Observable,Subscription, interval  } from 'rxjs';
export class ProductsComponent implements OnInit {
  private updateSubscription: Subscription;

  ngOnInit() {
     this.updateSubscription = interval(3000).subscribe(
     (val) => { this.getProducts()});

    });
  }
}

---

什么是“加载页面”？自动加载我的页面是什么意思？你到底想自动加载什么？您当前的实现启动了一个订阅，该订阅将每秒调用一次this.getProducts。@Ivan-自动重新加载意味着如果有人打开我的网站，将在页面上自动回发。@Scorpio590-我想获取产品的最新状态并绑定到表。对于rhat，如果页面处于打开状态，我需要自动刷新页面。因此，您不想刷新页面，而是每隔一秒钟从外部源加载数据？这是定义组件的有效语法。我猜@ArvindChourasiya只是为了简洁起见才漏掉了这个@Scorpio590-我确实有组件和所有组件。只是我发布了最佳代码。请检查我更新的问题。请不要只发布代码作为答案，而是说明代码的作用以及如何解决问题。有解释的答案通常质量较高，更容易吸引选票。你能详细说明为什么这应该是一个答案吗？将它放在构造函数中与放在onInit方法中有什么区别？@scorpio590。我没有说这是答案。我说试试这个，因为如果Arvind Chourasiya代码在init方法中不起作用，那么试着放入构造函数。但是试着使用Observable如果它不是一个答案，那么请不要作为一个答案提供。没有理由相信任何在onInit方法中不起作用的东西都会在构造函数中起作用。此外，AFAIK上没有间隔方法Observable@Scorpioo590. 这是我在系统中尝试过的一个工作示例，现在我无法在评论部分回复，因为我的声誉没有达到50。另外，如果Arvind Chourasiya尝试这样做。这可能会有所帮助，因为它是一个工作示例。如果资源发生更改，这将重新加载页面。这是ng serve的默认行为，并没有解决OP希望每隔n秒从远程服务器重新加载内容的问题。顺便说一下，切换到Windows 10后，ng serve不再自动更新资源。但谢谢你指出这很奇怪。我也在使用Windows 10，ng serve也能正常工作。您正在使用哪个版本的cli？