Angular：滚动下一个旋转木马的图像并显示上一页

Question

使用轮播更改图像

我正在使用 angular 构建一个网络应用程序，直到现在一切正常，但我在我的应用程序中实现 carousel 时遇到了问题，尽管我已添加旋转木马成功并且工作正常，但我无法通过点击移动旋转木马项目上一页或下一页而且他们也没有按照他们的动作移动，我正在使用路线在我的应用中，因此我从 HTML 中删除了href元素。请帮我移动项目。

首页HTML文件：

<div class="row">
  <div class="col-xs-12">
    <div id="mySlider" class="carousel slide" data-ride="carousel" >
      <ol class="carousel-indicators">
        <li data-target="#mySlider" data-slide-to="0" class="active"></li>
        <li data-target="#mySlider" data-slide-to="1"></li>
        <li data-target="#mySlider" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="\assets\images\max.jpg" alt="image 0" style="width:100% ; max-height:400px" class="img-responsive">
        </div>
        <div class="item">
          <img src="\assets\images\MOH.jpg" alt="image 0" style="width:100% ; max-height:400px" class="img-responsive">
        </div>
      </div>

      <a class="left carousel-control"  data-slide="prev" [routerLink]="[index]">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" data-slide="next" [routerLink]="[index]">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>

    </div>
  </div>
</div>

Routing.ts：

const gameRoutes: Routes = [
    {path:'', redirectTo: '/main',pathMatch:'full'},
    {path:'main',component:MainPostComponent, children:[
        {path:'',component:StartcomponentComponent},
        {path:':id',component:DetailPostComponent}
    ]},
    {path: 'homepage',component:FirstpageComponent}
]
@NgModule({
    imports: [RouterModule.forRoot(gameRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{
}