angular2：class FoodsComponent - 由：无法读取属性＆＃39; nativeElement＆＃39;未定义的

Question

在我的组件slick.slider.ts中，我做了：

export class SlickSliderComponent  {

 $element: any;
 @ViewChild('el') el : ElementRef;
     // this.start = [{setting : "unslick"}];
     ngAfterViewInit(){
    this.$element = this.el.nativeElement;   
     }
}

在这里我调用jquery滑块：

 ngAfterContentInit() {

jQuery(this.$element).slick(this.options);
}

当我调用此组件时，在模板中：

<slick-slider #el class="slick-tab-centered" *ngIf="foods" >
...
... 
</slick-slider>

我收到此错误

class FoodsComponent - inline template:40:0 caused by: Cannot read property 'nativeElement' of undefined

Answer 1

您正在尝试获取组件的原生元素。这样做：

import { ElementRef } from "@angular/core";


export class SlickSliderComponent  {

     $element: any;
     constructor(private el :ElementRef){}
     ngAfterViewInit(){
         this.$element = this.el.nativeElement;   
     }
}