angular - ViewChild 无法正常工作( ionic 元素)

Question

我想在添加特定类时触发 ion-item-sliding 元素。在我的例子中是“事件幻灯片”。我试图用 ViewChild 引用元素，但我总是得到错误

TypeError: Cannot read property 'classList' of undefined

当调用 clickHandler 方法时。

<ion-list>
  <ion-item-sliding #slideItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button (click)="unread(item)">Unread</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

HTML

export class TestPage { 

  @ViewChild('slideItem') slideItem : ElementRef;

  constructor() {}

  // ...

  @HostListener('click', ['$event'])
  clickHandler(event) {
    console.log("Test 1"); // gets called  

    if(this.slideItem.nativeElement.classList.contains('active-slide'))  {
      console.log("Test 2");  
    }
  }
}

Answer 1

当元素承载组件或指令时，默认情况下 @ViewChild() 返回组件实例而不是 ElementRef。

您需要明确声明您想要 ElementRef

@ViewChild('slideItem', {read: ElementRef}) slideItem : ElementRef;

另见 angular 2 / typescript : get hold of an element in the template