угловой нг для вызова javascript - PullRequest
Новая
       13

угловой нг для вызова javascript

0 голосов
/ 10 сентября 2018

У меня есть такой 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>

Это работает нормально. Проблема, с которой я сталкиваюсь, заключается в том, что когда новый продукт добавляется немедленно, он должен быть показан в карусели сов ... фактически он загружается, но неправильно, как показано на рисунке ниже

enter image description here

Таким образом, чтобы решить эту проблему, нам нужно вызвать нижеприведенную функцию add в ngFor 

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

Может кто-нибудь сказать мне, как вызвать эту функцию «добавить» ...

1 Ответ

0 голосов
/ 14 сентября 2018

AngularDart не позволяет добавлять динамические компоненты на страницу, используя чистый HTML, подобный этому. Это по соображениям безопасности и производительности. Фактически он не помещает полный угловой двигатель на страницу во время выполнения.

У него есть другие способы сделать это. Проще всего добавить еще одну запись в список, и она будет отображаться в цикле for.

Другая возможность состоит в том, чтобы использовать ComponentFactory, чтобы добавить его на страницу https://webdev.dartlang.org/api/angular/angular/ComponentFactory-class

Я не уверен, что owl делает именно в своем вызове, но вы можете добавить html без углового компонента и использовать фабрику компонентов, чтобы вставить его в нужное место после того, как owl сделает это.

...