为轮播组件实现 onSlideClick

Question

我正在使用 ng-bootstrap bootstrap 组件。

我还是 Angular2 的新手，在理解一些概念时遇到了困难。

轮播组件不包含 onClick 事件输出。

我正在尝试创建自己的幻灯片，同时维护我单击的幻灯片的信息。

因此我尝试了这个：

<ngb-carousel>
  <template ngbSlide id="mySlide" (click)="onSlideClicked()">
    <img src="../assets/slide.jpg">
    <div class="carousel-caption">
      <h3>MySlide</h3>
      <p>Just my slide.</p>
    </div>
  </template>
</ngb-carousel>

这不起作用并崩溃了。所以我又有了两个想法：给ngb-carousel本身添加一个clickevent（这并没有给我关于id的信息）或者给图片添加一个clickevent，同样的问题。

我如何实施 onClick 最佳实践，它会给我所点击对象的 ID？我应该双绑定 ID 吗？

Answer 1

自己找到解决方案：

使用主题标签，我们可以立即将轮播对象传递给函数

<ngb-carousel  #currSlide (click)="onSlideClicked(currSlide)">

carousel.ts中的方法：

  onSlideClicked(value: any){
    console.log(value.activeId);
  }

returns activeId 又名活动幻灯片

为轮播组件实现 onSlideClick

Implementing onSlideClick for carousel component

ng-bootstrap

angular