Javascript 在Angular中，如何使用相同的组件和相同的数据集显示两个转盘？

我当前使用的示例json文件，我使用json服务器创建假API资源，以便在前端使用

{
  "data": [
    {
      "id": "1",
      "imgBig": "https://picsum.photos/id/1/1024/200",
      "imgSmall": "https://picsum.photos/id/1/1024/200"
    },
    {
      "id": "2",
      "imgBig": "https://picsum.photos/id/2/1024/200",
      "imgSmall": "https://picsum.photos/id/2/1024/200"
    },
    {
      "id": "3",
      "imgBig": "https://picsum.photos/id/3/1024/200",
      "imgSmall": "https://picsum.photos/id/3/1024/200"
    }
  ]
}

在转盘1中渲染的图像不能同时在另一个转盘中渲染。i、 e：转盘1正在渲染img1，转盘2必须渲染img1以外的任何图像

我是新来的，不知道如何做到这一点，请有人帮我或指导我正确的道路

MY SERVICE.TS文件

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { Observable, fromEventPattern } from 'rxjs';
import { data } from 'src/app/model/data.model'

const headerOption = {
  headers: new HttpHeaders({
    'content-Type': 'application/json'
  })
}

@Injectable()
export class ImageService {

 url = "http://localhost:3000/data/";

  constructor(
    private http: HttpClient
  ) { }

  getAllImages(): Observable<data[]> {
    return this.http.get<data[]>(this.url, headerOption )
  }
}

 <div class="col-md-12">
         <!-- component to load carousel -->
         <app-big-images></app-big-images>

       </div>
        </div>
        <div class="row">
            <div class="col-md-6 m-0">
                <div class="mt-2">
                    <div class="text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus tellus, tempus quis aliquet sed, consectetur in arcu. Donec et ligula facilisis, ullamcorper ipsum eleifend, sodales tellus. </p>

                    </div>
</div>
            </div>

            <div class="col-md-4">
               <!-- same component to load carousel but how to display random img using same data -->
                <app-big-images></app-big-images>
            </div>

          </div>

大图像组件.html文件

import { Component, OnInit } from '@angular/core';
import { ImageService } from 'src/app/modules/shared/image.service';
import { data } from 'src/app/model/data.model';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

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

  data: data[];


  constructor(
    private dataImage: ImageService,
    config: NgbCarouselConfig
  ) {
    config.interval = 2000;
    config.wrap = true;
    config.keyboard = false;
    config.pauseOnHover = false;
  }

  ngOnInit() {
    this.getAllImage();
  }

  getAllImage() {
    this.dataImage.getAllImages().subscribe(
      (data:data[]) => {
        this.data = data;
      }
    )
  }

}

<div class="mb-5">
        <h1>Test</h1>
        <div class="first-carousel">

            <!-- This is to show dynamic image using service -->
                  <div class="col-md-12 py-3">
                    <ngb-carousel *ngIf="data">
                      <ng-template ngbSlide *ngFor="let img of data">
                        <img [src]="img.imgBig" >
                        <div class="carousel-caption">
                          <p [innerText]="img.id"></p>
                        </div>
                      </ng-template>
                    </ngb-carousel>
                  </div>

</div>

试验

app.component.html

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { Observable, fromEventPattern } from 'rxjs';
import { data } from 'src/app/model/data.model'

const headerOption = {
  headers: new HttpHeaders({
    'content-Type': 'application/json'
  })
}

@Injectable()
export class ImageService {

 url = "http://localhost:3000/data/";

  constructor(
    private http: HttpClient
  ) { }

  getAllImages(): Observable<data[]> {
    return this.http.get<data[]>(this.url, headerOption )
  }
}

 <div class="col-md-12">
         <!-- component to load carousel -->
         <app-big-images></app-big-images>

       </div>
        </div>
        <div class="row">
            <div class="col-md-6 m-0">
                <div class="mt-2">
                    <div class="text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus tellus, tempus quis aliquet sed, consectetur in arcu. Donec et ligula facilisis, ullamcorper ipsum eleifend, sodales tellus. </p>

                    </div>
</div>
            </div>

            <div class="col-md-4">
               <!-- same component to load carousel but how to display random img using same data -->
                <app-big-images></app-big-images>
            </div>

          </div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。在梅特斯·泰卢斯，坦普斯·奎斯·阿利奎特·塞德，阿库的圣骑士。面部舌苔、掌跖肌、足底肌

为什么不向我们展示一下如何使用这些数据？我们无法想象你的代码请提供一些代码奇怪的是，这个stackoverflow中没有人能解决我的问题。。