Question

我正在研究Angular项目并使用模板。我的模板使用owl.carousel.min.js。我单击任何菜单按钮时，路由页面调整大小并在路由后重新加载的问题。我不想在路由时重新加载页面。

index.html ...

first()

home.component.html

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

app-routing-module.ts

 <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>

Answer 1

使用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数组中

Owl.carousel.min.js在Angular上重新路由页面

1 个答案: