ViewChild无法正常工作（离子元素）

Question

当要添加一个特定的类时，我想触发离子-项目-滑动元素。就我而言，是“主动滑梯”。我试图用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：获取模板中的元素