Nativescript Android Duplicate слайды карусели на спине

Question

Я новичок в NativeScript с TypeScript/Angular для Android, и я стараюсь, чтобы моя карусель работала нормально. Карусель генерируется программно на моей странице first-screen.component.ts, и для этого я использую RxJS. Моя проблема в том, что когда я перехожу на вторую страницу и возвращаюсь на страницу первого экрана с помощью кнопки "Назад", карусель загружает еще три слайда и делает это каждый раз, и я не могу понять, почему.

first-screen.component.ts:

const Carousel = require('nativescript-carousel').Carousel;
import {EventData} from "tns-core-modules/data/observable";
import {renderCarouselSlides} from "../../shared/support";
import {PercentLength} from "tns-core-modules/ui/styling/style-properties";
import {Image} from "tns-core-modules/ui/image";
import {GridLayout, GridUnitType, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import * as Rx from "rxjs";
import {Label} from "tns-core-modules/ui/label";
import {HorizontalAlignment} from "tns-core-modules/ui/enums";
import center = HorizontalAlignment.center;
import {TextView} from "tns-core-modules/ui/text-view";


export class FirstScreenComponent implements OnInit {

    private subject: Rx.Subject<{ images: { src: string; title: string; description: string }[] }> =
        new Rx.AsyncSubject();


        constructor(private router: Router, private page: Page) {

        this.subject.next({
            images: [
                {
                    src: "res://img1",
                    title: "title 1",
                    description: "Desc 1"
                },
                {
                    src: "res://img2",
                    title: "Title 1",
                    description: "Desc 2"
                },
                {
                    src: "res://img3",
                    title: "Title 2",
                    description: "Desc 3"
                }
            ]
        });
    }

    ngOnInit() {
        this.page.actionBarHidden = true;
        this.page.backgroundImage = 'res://background';

        setTimeout(() => this.subject.complete(), 500);
     }

     onSigninButtonTap() {
        this.router.navigate(['/login']);
    }

    onCarouselLoad(args: EventData): void {

        this.subject.subscribe({
            next: (data) => {
                const carousel: typeof Carousel = args.object;

                  renderCarouselSlides(carousel, data.images, (imageData: {
                      src: string; title: string; description: string
                  }) => {
                      const gridLayout = new GridLayout();

                      const firstColumn = new ItemSpec(1, GridUnitType.AUTO);
                      const firstRow = new ItemSpec(1, GridUnitType.AUTO);
                      const secondRow = new ItemSpec(1, GridUnitType.AUTO);
                      const thirdRow = new ItemSpec(1, GridUnitType.AUTO);

                      gridLayout.addColumn(firstColumn);
                      gridLayout.addRow(firstRow);
                      gridLayout.addRow(secondRow);
                      gridLayout.addRow(thirdRow);

                      carousel.height = "500";

                      const image = new Image();
                      const titleLabel = new Label();
                      const descriptionTextView = new TextView();

                      // Img
                      image.src = imageData.src;
                      image.width = PercentLength.parse("70%");
                      image.height = PercentLength.parse("50%");
                      image.stretch = "aspectFit";
                      image.marginBottom = PercentLength.parse("2%");
                      GridLayout.setRow(image, 0);
                      GridLayout.setColumn(image, 0);
                      gridLayout.addChild(image);

                      // title
                      titleLabel.text = imageData.title;
                      titleLabel.textAlignment = "center";
                      titleLabel.fontSize = 25;
                      GridLayout.setRow(titleLabel, 1);
                      GridLayout.setColumn(titleLabel, 0);
                      gridLayout.addChild(titleLabel);


                      // Description
                      descriptionTextView.text = imageData.description;
                      descriptionTextView.editable = false;
                      descriptionTextView.backgroundColor = new Color('#2b78e4');
                      descriptionTextView.width = PercentLength.parse("100%");
                      descriptionTextView.textAlignment = "center";
                      descriptionTextView.fontSize = 13;
                      GridLayout.setRow(descriptionTextView, 2);
                      GridLayout.setColumn(descriptionTextView, 0);
                      gridLayout.addChild(descriptionTextView);
                      return gridLayout;
                  });
              }
        });
    }

файл first-screen.html:

<StackLayout #container verticalAlignment="center">

    <GridLayout class="page" verticalAlignment="top">
        <Carousel (loaded)="onCarouselLoad($event)" height="200"></Carousel>
    </GridLayout>

    <Button text="Login" class="button-submit" (tap)="onSigninButtonTap()"></Button>
</StackLayout>