要在整个页面上使用ngx-spinner覆盖，您可以按照以下步骤进行操作：

1. 首先，安装ngx-spinner库。您可以使用以下命令在您的Angular项目中安装它：

npm install ngx-spinner --save

2. 在您的app.module.ts文件中导入ngx-spinner模块：

import { NgxSpinnerModule } from 'ngx-spinner';

@NgModule({
  imports: [
    NgxSpinnerModule
  ],
  //...
})
export class AppModule { }

3. 在您希望使用加载器的组件的ts文件中导入ngx-spinner服务和Spinner类型：

import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { Spinner } from 'ngx-spinner/lib/ngx-spinner.enum';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  constructor(private spinnerService: NgxSpinnerService) { }

  ngOnInit() {
    this.spinnerService.show();
    // 执行需要一些时间的操作，例如从服务器获取数据
    setTimeout(() => {
      this.spinnerService.hide();
    }, 2000); // 设置2秒后隐藏加载器
  }

}

4. 在您希望显示加载器的组件的HTML文件中添加ngx-spinner标记：

通过上述步骤，当您导航到该组件时，将在整个页面上显示ngx-spinner加载器，直到您隐藏它为止。