angular-cli: Wie man ein Element mit jQuery referenziert

Question

Das Problem - ich habe eine andere Instanz von slick slider und Dinge wurden chaotisch.

Wie kann ich eine Variable für mein privates el Variable in meinem Konstruktor hier gesetzt:

z.B. - Wie kann ich einen direkten Verweis auf ein Element mit jQuery verwenden, anstatt den gesamten Baum zu durchsuchen, so wie ich es hier mache?

jQuery(this.el.nativeElement).variable.slick({..

import { Component, ElementRef, ViewChild, HostListener, Input, Renderer, OnInit } from '@angular/core'; 
import { WindowRefService } from 'app/core/window-ref.provider'; 

declare var jQuery: any; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-preview', 
    templateUrl: 'app-preview.component.html' 
}) 

export class AppPreviewComponent implements OnInit { 

    constructor(private el: ElementRef) { } 

    ngOnInit() { 
     jQuery(this.el.nativeElement).slick({ 
      infinite: false, 
      arrows: true, 
      variableWidth: true, 
      centerMode: true, 
      dots: false, 
      focusOnSelect: true, 
      cssEase: 'ease-in-out' 
     }); 
    } 
} 

Answer 1

Verwaltet, um eine Auflösung zu finden. In seiner einfachsten Form.

Was es war:

jQuery(this.el.nativeElement).slick({ 
    ... 
}); 

Was ich dies sein musste (und es funktioniert):

jQuery('app-preview').slick({ 
    ... 
}); 

Answer 2

Ich bin nicht ganz sicher, was Ihre jQuery.slick()-Plugin ist, aber auf dem Angular2 Teil:

Möglicherweise mögen Sie setzen diese in den ngAfterViewInit() Verfahren berücksichtigen (nicht Vergessen Sie nicht, es dem implements-Teil hinzuzufügen, da dies im Lebenszyklus ausgelöst wird, in dem der HTML-Code geladen wurde.

Es könnte interessant sein, den ViewChild() Teil von Angular2 nachzuschlagen. Es sieht ein bisschen wie folgt aus:

ViewChild('some-id') variableName: ElementRef

und in Ihren HTML:

<blabla #some-id></blabla>

Sie erhalten dann Zugang in Ihrem Controller this.variableName haben, die Sie Zeichenfolge andere Funktionen, wie jQuery-Plugins.