Мне кажется, что вы пытаетесь использовать bootstrap , а не ngx-bootstrap .
Я думаю, что вам лучше использовать последний, он гораздо более приспособлен к угловому:)
Во-вторых, я не понимаю, почему вы пытаетесь форсировать процедуру создания компонента, используя «сложный» ComponentFactory и так далее. Есть ли причина для этого? Просто потому, что если нет, я бы лучше использовал пример Dynamic Slides из ngx-bootstrap docs:
https://valor -software.com / NGX-самозагрузка / # / # карусельных динамические гребни
Таким образом, в основном вам нужно иметь цикл for (ngFor) в файле шаблона, который генерирует слайды динамически, в зависимости от того, сколько данных слайдов у вас есть в ограниченном вводе.
Тег carousel имеет свойство activeSlide, которое можно привязать в двух направлениях, так что вы можете легко управлять активностью нужного индекса слайда.
EDIT:
Если единственная проблема состоит в том, как удалить тег переноса компонента screenshots, то вы можете сделать следующее:
- настройте компонент скриншотов, чтобы он тоже работал как директива:
вместо
selector: 'screenshots',
использование
selector: 'screenshots, [screenshots-directive]',
- использование
вместо
<div class="carousel-inner">
<template #screenshots></template>
</div>
написать цикл for, как упоминалось ранее:
<div class="carousel-inner">
<div class="carousel-item" *ngFor="let screenshot of screenshots;
let i = index" screenshots-directive [number]="i" [project]="screenshot.project">
</div>
</div>
Обратите внимание, что я взял carousel-item div из компонента screenshots. Это необходимо, потому что цикл должен быть добавлен в HTML-тег. Обычно теги ng-template и ng-container можно использовать, когда вы хотите использовать цикл for, но вы не хотите, чтобы контейнер цикла for отображался. Однако, похоже, он не работает вместе с директивой, такой как screenshots-directive, я не знаю почему.