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

Question

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

索引.html ...

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

首页.组件.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>

app-routing-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]
})

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 文件中添加第三方脚本。相反，您应该将它们添加到.angular-cli.json或angular.json的scripts数组中