Динамически добавить ngx-slick-carousel в Angular 8 - PullRequest
Новая
       6

Динамически добавить ngx-slick-carousel в Angular 8

1 голос
/ 17 февраля 2020

Я использую модуль ngx-slick-carousel для создания карусели в моем приложении Angular 8. Все работает хорошо, когда я вызываю директиву из моего html шаблона,

например, <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">[...]</ngx-slick-carousel>.

Однако теперь я хочу динамически создать карусель и включить ее в [innerHtml] который запускает трубу для отмены дезинфицирующего средства Angular. Вот как выглядит мой код.

foo.component. html: 

<div class="dynamic-content" [innerHtml]="dynamicHtml | safeHtml">
</div>

foo.component.ts: 

// Imports
[...]

@Component({
    selector: 'app-foo',
    templateUrl: './foo.component.html',
    styleUrls: ['./foo.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FooComponent implements OnInit {

    constructor(
        [...]
    ) {
    }

    slideConfig = {
        slidesToScroll: 1,
        nextArrow: ('.next'),
        prevArrow: ('.prev'),
        infinite: false,
        swipeToSlide: true
    };

    public dynamicHtml = '';

    // This method is called at some point
    public createDynamicContent(condition) {
        if (condition) {
            this.dynamicHtml = `
            <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">
                <div ngxSlickItem>
                    <!-- Some stuff inside the slide -->
                </div>
                <div ngxSlickItem>
                    <!-- Some stuff inside the slide -->
                </div>
                <div ngxSlickItem>
                    <!-- Some stuff inside the slide -->
                </div>
            </ngx-slick-carousel>`;
        } else {
            this.dynamicHtml = `<p><strong>Just some simple html</strong></p>`;
        }
    }
}

Примечание: SlickCarouselModule импортируется в мой файл app.modules.ts, чтобы я мог использовать его во всех моих компонентах.

Из того, что я понимаю проблема в том, что карусель инициализируется при инициализации компонента, и в этот момент моя карусель еще не существует. Мой вопрос будет: как мне динамически создать ngx-slick-carousel ?

Пока предпринимаются попытки

После просмотра node_modules Папка и, пытаясь понять код для модуля, я попытался вручную запустить инициализацию карусели, добавив следующий код в мой foo.component.ts: 

import { SlickCarouselComponent } from 'ngx-slick-carousel';

[...]

@ViewChild(SlickCarouselComponent, {static: false})
public slickCarousel: SlickCarouselComponent = new SlickCarouselComponent();

[...]

// This method is called at some point
public createDynamicContent(condition) {
    if (condition) {
        this.dynamicHtml = [...];
        this.slickCarousel.initSlick();
    }
}

Я получил ошибку в своей консоли: this.slickCarousel.initSlick() is undefined.

...