Owl.carousel.min.js Перезагрузить страницу на угловой - PullRequest
Новая
       16

Owl.carousel.min.js Перезагрузить страницу на угловой

0 голосов
/ 27 августа 2018

Я работаю над проектом Angular и использую шаблон. Мой шаблон использует owl.carousel.min.js. Моя проблема в том, что перенаправленная страница изменяет размеры и перезагружается после маршрутизации, когда я нажимаю любую кнопку меню. Я не хочу перезагружать страницу при маршрутизации.

index.html ... 

<script type='text/javascript' src='./assets/js/owl.carousel.min.js'><\/script>

home.component.html 

 <ul id="menu-important-links" class="menu rt-mega-menu-transition-slide">
     <li id="menu-item-222" class="home-megamenu menu-item menu-item-type-custom menu-item-object-custom rt-mega-menu-full-width rt-mega-menu-hover item-222">
         <a routerLinkActive="active" routerLink="/">{{ 'Home' | translate }}</a>
     </li>           
     <li id="menu-item-711" class="menu-item menu-item-type-custom menu-item-object-custom menu-flyout rt-mega-menu-hover item-711">
         <a routerLink="/contactus" > {{ 'Contact' | translate }}</a>
     </li>
  </ul>

приложение-маршрутизации module.ts 

const appRoutes: Routes = [
   { path: '', component: HomeComponent, pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'contactus', component: ContactComponent }
];

@NgModule({
   imports: [RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
})

1 Ответ

0 голосов
/ 27 августа 2018

Используйте routerLink вместо href. href перезагрузит страницу. Так что избавься от этого. И используйте routerLink, которая является специальной директивой, которая идет с RouterModule. Он работает подобно href с той разницей, что он не перезагружает страницу.

Так замените это <a href="#">{{'Home' | translate}}</a>. с <a routerLink="/home">{{'Home' | translate}}</a>

Затем попробуйте изменить последовательность конфигурации вашего маршрута. 

const appRoutes: Routes = [
   { path: 'dashboard', component: DashboardComponent },
   { path: 'contactus', component: ContactComponent },
   { path: '', component: HomeComponent, pathMatch: 'full' }
];

Вот вам StackBlitz для справки.

Кроме того, вам не следует добавлять сторонние скрипты непосредственно в файл index.html, как вы это сделали здесь. Вместо этого вы должны добавить их в массив scripts .angular-cli.json или angular.json

...