以下是一个使用服务进行加载的Angular 8旋转器组件的解决方案，其中包含了代码示例：

1. 首先，创建一个名为loader.service.ts的服务文件，并在其中定义一个isLoading布尔变量，用于控制加载状态。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  isLoading: boolean = false;

  constructor() { }

  show() {
    this.isLoading = true;
  }

  hide() {
    this.isLoading = false;
  }
}

2. 创建一个名为loader.component.ts的组件文件，用于显示旋转器。

import { Component, OnInit } from '@angular/core';
import { LoaderService } from './loader.service';

@Component({
  selector: 'app-loader',
  template: `
    

      

    
  `,
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {

  constructor(public loaderService: LoaderService) { }

  ngOnInit() {
  }

}

3. 创建一个名为loader.component.css的CSS文件，用于定义加载器的样式。

.overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

4. 在需要显示加载器的组件中，导入并使用LoaderService服务。

import { Component, OnInit } from '@angular/core';
import { LoaderService } from './loader.service';

@Component({
  selector: 'app-example',
  template: `
    
Example Component
    Load Data
  `,
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor(private loaderService: LoaderService) { }

  ngOnInit() {
  }

  loadData() {
    this.loaderService.show(); // 显示加载器

    // 模拟加载数据
    setTimeout(() => {
      this.loaderService.hide(); // 隐藏加载器
    }, 2000);
  }

}

5. 在需要显示加载器的组件的模板中，添加标签以显示加载器。

通过以上步骤，您可以创建并使用一个使用服务进行加载的Angular 8旋转器组件。当调用loaderService.show()方法时，加载器将显示在页面上，而调用loaderService.hide()方法时，加载器将被隐藏。