javascript - Angular ngFor 调用 javascript

Question

我有这样的 HTML 代码

<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
    <div class="owl-stage" *ngFor="let product of products; let i=index;">
        <div class="owl-item">
            <carouselFixture [stream]="product.stream" *ngIf="product.viewModelType == 'ProductSummary'" ></carouselFixture>
        </div>
    </div>
</div>

这工作正常。我面临的问题是，当新产品立即添加时，它必须显示在 Owl Carousel 中......实际上它正在加载，但错误如下图所示

因此，为了解决这个问题，我们需要调用ngFor中的以下add函数

$('#add').on('click', function () {
        var html = '<div class=\"item\"><carouselFixture 
        [stream]="product.stream" *ngIf="product.viewModelType == 
       'ProductSummary'" ></carouselFixture></div>';
        console.log(html);
        owl.trigger('add.owl.carousel', [html, 0])
            .trigger('refresh.owl.carousel');
    });

谁能告诉我如何调用这个“添加”函数...

Answer 1

AngularDart 不允许使用像这样的纯 html 将动态组件添加到页面中。这是出于安全和性能原因。它实际上并没有在运行时将完整的 Angular 引擎放入页面中。

它确实还有其他方法可以做到这一点。最简单的方法是在列表中添加另一个条目，它将显示在 for 循环中。

另一种可能性是使用ComponentFactory将其添加到页面https://webdev.dartlang.org/api/angular/angular/ComponentFactory-class

我不确定 owl 在其调用中到底在做什么，但您可以添加不带 Angular 组件的 html，并在 owl 执行该操作后使用组件工厂将其插入到正确的位置。