要在Angular组件中每X秒刷新页面上的数据，你可以使用RxJS的interval操作符来定期发出一个值，然后在订阅中执行刷新操作。下面是一个简单的示例代码：

1. 首先，安装RxJS依赖：

npm install rxjs

2. 在你的组件文件中，导入需要的依赖：

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

3. 在组件类中，实现OnInit和OnDestroy接口，并定义一个订阅对象：

export class YourComponent implements OnInit, OnDestroy {
  private refreshSubscription: Subscription;

  ngOnInit() {
    // 每X秒执行一次刷新操作
    this.refreshSubscription = interval(5000).subscribe(() => {
      this.refreshData();
    });
  }

  ngOnDestroy() {
    // 取消订阅以避免内存泄漏
    if (this.refreshSubscription) {
      this.refreshSubscription.unsubscribe();
    }
  }

  refreshData() {
    // 在这里执行刷新操作，例如从API获取最新数据
    // 然后更新组件的数据属性，以便在模板中显示最新数据
  }
}

在上面的代码中，我们在组件的ngOnInit生命周期钩子中创建了一个interval对象，并定义了一个回调函数来执行刷新操作。每当interval对象发出值时，回调函数就会被调用。在ngOnDestroy生命周期钩子中，我们取消了订阅以避免内存泄漏。

请注意，上述代码中的5000是以毫秒为单位的时间间隔，表示每5秒刷新一次数据。你可以根据需要更改这个值。

希望这个示例能帮助到你！