如何在离子视图中向div标签添加点击/点击功能？

Question

当我点击centerMarker div标签时，我使用了休闲代码，它可以运行测试功能，但无法正常工作。

scss

 page-posting {
      background: rgb(229, 227, 223);
      #map {
        width: 100%;
        height: 100%;
        z-index: 2;
      }
      #centerMarker {
        width: 30px;
        height: 49px;
        display: block;
        content: ' ';
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin: -44px 0 0 -15px;
        background: url('../assets/img/start.svg');
        background-size: 30px 49px; 
        pointer-events: none; 
      }

      #map .gmnoprint img {
        width: 60px;
        height: 80px;
      }

      img {
        width: 60px;
        height: 80px;
      }

      .container-map {
          position: absolute;
          top: 0px;
          bottom: 0px;
          width: 100%;
          height: 96%;
          z-index: 1;
        }
      }
    }

HTML

<ion-content no-bounce>
  <ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager dir="rtl">
    <ion-slide>
      <div class="container-map">
        <div #map id="map"></div>
      </div>
<div id="centerMarker" (click)="test()"></div>
    </ion-slide>
  </ion-slides>
</ion-content>

posting.ts

test(){
console.log('it is work');
}

控制台日志 我添加单击我的文本到div进行检查。