Question

我正在尝试使用角度为4的猫头鹰旋转木马2.3.3。它适用于应用程序的第一次加载，但是当我使用角度路由从另一个组件导航回来时，它会消失。我不确定，但听起来它的javascript是不活跃的。

这是我的代码：

的index.html

＆＃13;

<!-- in the header tag -->

<link rel="stylesheet" href="/assets/owlcarousel/owl.carousel.min.css" />
<link rel="stylesheet" href="/assets/owlcarousel/owl.theme.default.min.css" />
 
<!-- at the end of the body tag -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/assets/owlcarousel/owl.carousel.min.js"></script>
  <script>
      $(document).ready(function(){
        $(".owl-carousel").owlCarousel({
          nav:true,
          loop:true,
          responsiveClass:true,
          responsive:{
              0:{
                  items:1,
              },
              600:{
                  items:2,
              },
              1000:{
                  items:3,
              }
          }
        });
      });
  </script>

＆＃13;

myComponent.component.html

＆＃13;

<div *ngIf="recipes && recipes.length" class="owl-carousel owl-theme mt-3 px-1">
      <!-- ========= item ========= -->
      <div *ngFor="let recipe of filteredRecipes" class="col-11">
          <img src="{{recipe.imageUrl}}" [title]="recipe.name" class="img-fluid" alt="...">
        <div class="caption">
          <a [routerLink]="['/recipes', recipe.id]">
            <h4 class="py-2">{{ recipe.name }}</h4>
          </a>
          <rs-star [rating]="recipe.starRating" 
                  (notify)="onNotify($event)"
                  (ratingClicked)="onRatingClicked($event)"></rs-star>
        </div>
      </div>
      <!-- Item -->
  </div>

＆＃13;

以下是我的路由代码：

// the main routing module 

@NgModule({
  imports: [
    RouterModule.forRoot([
      {path: 'home', component: HomeComponent},
      {path: '', redirectTo: 'home', pathMatch: 'full'},
      {path: '**', redirectTo: 'home', pathMatch: 'full'},    
    ])
  ],
  exports: [ RouterModule ]
})

// the child routing module for myComponent 

@NgModule({
  imports: [
    RouterModule.forChild([
      {path: 'recipes', component: myComponent },
      {
       path: 'recipes/:id', 
       canActivate: [RecipeGuardService], 
       component: RecipeDetailsComponent 
      },

    ])
  ],
  exports: [ RouterModule ]
})

期待您的回音。

问候！

当使用角4路由器时，猫头鹰轮播消失

0 个答案: