在Angular中，可以使用RxJS的shareReplay操作符来共享Observable中的数据，并防止多次发出请求。下面是一个示例代码：

首先，创建一个名为DataService的服务，该服务负责从后端API获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data$: Observable;

  constructor(private http: HttpClient) { }

  getData(): Observable {
    if (!this.data$) {
      this.data$ = this.http.get('your-api-url').pipe(
        shareReplay(1) // 使用shareReplay操作符共享Observable中的数据
      );
    }
    return this.data$;
  }
}

在上面的代码中，getData方法使用shareReplay操作符来共享Observable中的数据。第一次调用getData方法时，会发出HTTP请求获取数据，并将Observable中的数据进行共享。之后的调用将直接返回共享的Observable，而不会再次发出请求。

接下来，可以在组件中使用DataService来获取数据：

import { Component, OnInit } from '@angular/core';
import { DataService } from 'your-data-service-path';

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

      
    
  `
})
export class YourComponent implements OnInit {
  data$: Observable;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.data$ = this.dataService.getData();
  }
}

在上面的代码中，通过在组件的ngOnInit方法中调用getData方法来获取数据，并将返回的Observable赋值给data$属性。然后，通过async管道将Observable中的数据解析为实际的数据，并在模板中显示。

这样，无论在组件的多个地方调用dataService.getData()方法，都会共享同一个Observable，并且只会发出一次请求获取数据。