Javascript 在Angular 8中动态添加ngx滑动转盘

我正在使用该模块在Angular 8应用程序中创建旋转木马。当我从html模板调用指令时，一切都很好

e、 g.

[…]

但是现在，我想动态创建一个旋转木马，并将其包含在一个

[innerHtml]

中，它运行一个管道来覆盖角度消毒剂。下面是我的代码的样子

foo.component.html:

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

// 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>`;
        }
    }
}

---

我在控制台中获得了一个错误：

this.slickCarousel.initSlick（）未定义

ngx slick carousel不是常规HTML元素，您可以将其添加到div标记的innerHTML属性中，并期望浏览器对其进行分析和呈现。它是一个角度组件，动态创建此类组件应由Angular处理。有关如何动态创建角度组件的信息，请参阅本文。您好，谢谢您的评论。不幸的是，

ngx SlickCarousel

是从我的节点模块导入的，所以我对它没有太多的控制，当我从链接的帖子中尝试您的解决方案时，我收到一个错误，说

SlickCarouselModule不能用作入口组件

。您不应该在entryComponents数组中添加

SlickCarouselModule

。您应该添加

SlickCarouseComponent

，因为它是您试图在运行时动态添加的组件。ngx-slick-carousel不是常规的HTML元素，您可以将其添加到div标记的innerHTML属性中，并期望浏览器对其进行解析和呈现。它是一个角度组件，动态创建此类组件应由Angular处理。有关如何动态创建角度组件的信息，请参阅本文。您好，谢谢您的评论。不幸的是，

ngx SlickCarousel

是从我的节点模块导入的，所以我对它没有太多的控制，当我从链接的帖子中尝试您的解决方案时，我收到一个错误，说

SlickCarouselModule不能用作入口组件

。您不应该在entryComponents数组中添加

SlickCarouselModule

。您应该添加

SlickCarouseComponent

，因为它是您试图在运行时动态添加的组件。

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