旋转木马下一张幻灯片的Angular2 href问题

Question

我有一个自定义 modal component ，它负责显示包含轮播的叠加层（模态弹出窗口）。

问题：正如您在下面的代码中看到的那样，外部div包含 (click) 事件以关闭叠加层（ I dont have Header part in overlay < / em>的）。

<div class="modal fade" id="myModal" (click)="hide($event)">              
          ...
          ...   

    <a  class="left carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="sr-only">next</span>
     </a>

</div>

因此，当我点击 a tag 时，它也会隐藏叠加效果。如果我删除点击事件，则轮播工作正常。

要解决此问题，我已将(click)="stoppropogation($event);false"附加到 a tag 以停止事件传播。现在点击 a tag 不会隐藏叠加层，但它甚至不显示下一张图片。

这是我的代码，

<div class="modal fade" id="myModal" (click)="hide($event)">

          ...
          ...

          <a  (click)="stoppropogation($event);false" id="next"  role="button" data-slide="next">
            <span class="sr-only">Next</span>
          </a>

</div>



stoppropogation(event:any){
    event.stopPropagation();
    document.getElementById("next").href="#myCarousel";
}

任何简单的解决方案？