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

Question

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

问题：正如您在下面的代码中看到的，外部 div 包含(click)关闭覆盖 ( I dont have Header part in overlay) 的事件。

<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";
}

有什么简单的解决办法吗？