为什么“轮播”代码不起作用?

时间:2019-04-11 10:55:35

标签: angular twitter-bootstrap-3 carousel angular-routing

我正在尝试使用bootstrap和angular js设计轮播。下面是负责轮播的部分代码。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
          
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="../assets/img3.jpg" alt="Monster Book of Monsters" class="image">
              </div>
          
              <div class="item">
                <img src="../assets/img4.jpg" alt="Awesome Deals" class="image">
              </div>
          
              <div class="item">
                <img src="../assets/img3.jpg" alt="Monster Book of Monsters" class="image">
              </div>
            </div>
          
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
          </div>

我的问题是,由于锚标记中包含href,因此每次我尝试通过单击图标来更改图像时,#mycarousel都会附加到我的网址中。我的路线代码如下。

const routes: Routes = [
/* Include the neccessary paths for routing */

{ path: 'login', component: LoginComponent, pathMatch:'full' },
{ path: 'collection', component: CollectionComponent,pathMatch:'full' },

{path:'about',component:AboutComponent,pathMatch:"full"},

{path:'signing',component:SigningComponent,pathMatch:"full"},
{ path: '**', redirectTo: '/about', pathMatch:'full' }];

由于“ path:'**',redirectTo:'/ about',pathMatch:'full'”这条线在我的路径路径定义中,每次#mycarousel附加到我的url时,我都会转移到/ about页面

我也曾尝试删除href锚标签,但轮播无法正常工作。 我该怎么办?

0 个答案:

没有答案