在Angular 6中刷新组件

Question

我正在基于angular 6设计一个仪表板。我的仪表板有几个不同的组件排列在一起。我想每隔5分钟刷新一个组件。

我尝试过windows.location.reload()和location.reload()，但是它刷新整个页面而不仅仅是一个组件，即所有组件都会被刷新。所以，请帮忙解决这个问题，谢谢！

- Ashutosh Kumar

---

你想要刷新的这个组件，具体是想要刷新什么？你想要更新一些数据或者图表等吗？ - SiddAjmera

你可以使用@ViewChildren装饰器来获取页面中组件的句柄，然后在它们中逐个调用ngOnInit()。我个人没有尝试过。但是如果只是更新数据的问题，为什么需要刷新它们呢？这不应该自动无缝地完成吗？ - rrd

你不需要重新加载SPA，只需要调用API获取新数据并在组件中更新它们。 - PeS

你需要通过setTimeout/setInterval更新最新的API值到组件属性中来刷新数据。不要重新加载页面，因为单页应用程序可以根据路由访问更新组件。 - Suresh Kumar Ariya

API中的数据会随着时间的推移而发生变化......因此我需要每10分钟进行一次HTTP请求，以便检测并在UI中反映这些变化。 - Ashutosh Kumar

Answer 1

试试这个

constructor(private ref: ChangeDetectorRef) {    
setInterval(() => {
  this.ref.detectChanges();
 }, 5000);
}

- chethu

---

我在这里搜索了很多页面，最终找到了一个可行的答案，特别是当你试图通过使用订阅从另一个组件更新组件时。 - Manuel

Answer 2

给你，

import {Observable} from 'rxjs'; // Angular 6 
// import {Observable} from 'rxjs/Rx'; // Angular 5

  Observable.interval(1000).subscribe(x => {
    this.router.navigateByUrl('/RefreshComponent', {skipLocationChange: true}).then(()=>
    this.router.navigate(["Your actualComponent"]));
  });

或者

import {Observable} from 'rxjs'; // Angular 6 
// import {Observable} from 'rxjs/Rx'; // Angular 5

  Observable.interval(1000).subscribe(x => {
    this.ngOnInit();
  });

- rcanpahali

---

这对我不起作用...它说可观察类型不存在间隔。 - Ashutosh Kumar

你的rxjs版本是多少？ - rcanpahali

我使用了setInterval方法解决了这个问题......它起作用了......感谢您的帮助。 - Ashutosh Kumar

Answer 3

以下方法适用于我

ngOnInit(): void {
  setTimeout(() => { this.ngOnInit() }, 1000 * 10)
  //Interval = 10secs
}

- Jayanth Bhansali