Winkel 2 owlCarousel ist keine Funktion

Question

Ich versuche owlcarousel 2 zusammen mit Winkel 4. Ich habe folgende Setup zu verwenden:

.angular-cli.json:

"scripts": ["../node_modules/jquery/dist/jquery.js", 
        "../node_modules/tether/dist/js/tether.js", 
        "../node_modules/bootstrap/dist/js/bootstrap.js", 
        "../node_modules/owl.carousel/dist/owl.carousel.js" 
       ], 

offers-component.ts:

import { Component, AfterViewInit } from '@angular/core'; 


declare var $: any; 

@Component({ 
    selector: 'home-offers-container', 
    templateUrl: '../templates/home-offers-container.template.html', 
    styleUrls: ['../css/home-offers-container.component.css'] 
}) 

export class HomeOffersContainerComponent implements AfterViewInit { 
    ngAfterViewInit() { 
    $('.owl-carousel').owlCarousel(); 
    } 
} 

template.html

<div class="row"> 
    <div class="container"> 
     <home-offers class="owl-carousel"></home-offers> 
    </div> 
</div> 

Ich erhalte einen Fehler ERROR TypeError: $(...).owlCarousel is not a function. Ich sehe nicht, warum dieser Fehler auftauchen sollte. Ich habe die Skripte bestellt, wie es sein sollte - zuerst Jquery dann Eulenkarussell. Außerdem gibt typescritp bei jQuery keinen Fehler. Fehle ich irgendetwas/loading euleCarousel nicht richtig?

Muss ich jQuery/owlCarousel in die app.module.ts importieren? Wenn ja, irgendwelche Vorschläge wie?

Answer 1

Anstatt den direkten Zugriff auf die Klasse in ViewInit

versuchen und nutzen ViewChild wie

<home-offers class="owl-carousel" #owl></home-offers> 

@ViewChild('owl')owl:ElementRef; 

    ngAfterViewInit() { 
    $(this.owl.nativeElement).owlCarousel(); 
    } 

Answer 2

Mit jQuery für DOM-Manipulation mit kantigem ist nicht der richtige Ansatz.

Sie können Ihre DOM-Elemente unter Verwendung ViewChild Dekorateur auf diese Weise erreichen:

@Component({ 
    .... 
    templateUrl: 'mytemplate.html' 
}) 

export class MyComponent{ 
    @ViewChild('selector') private elementName; 
    ngAfterViewInit() { 
    //this is your dom 
    this.elementName.owlCarousel(); 
    } 
} 

und in Ihrer Vorlage Klasse, die Sie bekam festlegen, wer

<home-offers class="owl-carousel" #selector> </home-offers>