Angular2：touchStart和touchEnd在移動視圖中無法正確響應

Question

在CSS中，我們具有懸停屬性，因此要將懸停應用到移動視圖中，我嘗試應用touchstart和touchend事件。 但是事件無法正確響應。

以下是我的兩個活動

 @HostListener('touchstart', ['$event']) onTouchStart(event: Event): void {
    if (event) {
      event.preventDefault();
    }
    let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
    this.renderer.setElementStyle(part, 'color', 'green');
  }



  @HostListener('touchend', ['$event']) onTouchEnd(event: Event): void {
    if (event) {
      event.preventDefault();
    }
    let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
    this.renderer.setElementStyle(part, 'display', 'yellow');
  }

以下是我的CSS

.account-outlook-wrapper {
  .icon-interface-question-mark {
    color: yellow;
    position: relative;
    cursor: pointer;

    &:hover {
      color: green;
    }
  }

為了進行檢查，我將普通的CSS更改為

.account-outlook-wrapper {
      .icon-interface-question-mark {
        color: orange;
        position: relative;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }

但是由於touchstart事件，盡管窗口顏色只能在移動視圖中使用，但在窗口瀏覽器中顏色為綠色。 如果我沒有正確使用兩個事件，請告知我

Answer 1

觸摸事件效果很好。

還有其他問題（不是CSS或事件）：

1. Renderer2中沒有setElementStyle方法。 使用setStyle
2. 您嘗試將yellow設置為display值。 但display不接受顏色

看到這個例子： https : //stackblitz.com/edit/angular-s5wfhf