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

Question

我当前正在使用的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中渲染的图像无法同时渲染到另一个。即：轮播1正在呈现img1，轮播2必须呈现除img1之外的任何其他图像？

我是新手，不知道如何实现这一目标，有人可以帮助我还是将我引向正确的道路。

我的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 )
  }
}

我目前仅使用big-images-component;

big-images-component.ts 文件

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;
      }
    )
  }

}

big-images-component.html 文件

<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

 <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>