javascript - 使用 Angular 5 routerLink 进行路由时,联系人组件中的主页滑块或谷歌地图未加载
问题描述
我正在尝试使用 Angular 5 创建一个静态网站,我正在使用 owl carousel 作为图像滑块。我已经实现了路由,单击主菜单滑块后未显示,仅在第一次加载页面时显示。下面是我的代码
导航.component.html
<div class="mainmenu text-center floatleft">
<nav>
<ul>
<li><a routerLink="/home" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active">Home</a>
</li>
<li><a routerLink="/about" routerLinkActive="active">about</a></li>
<li>
<a routerLink="/contact" routerLinkActive="active">contact</a>
</li>
</ul>
</nav>
</div>
下面是我的
应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomesliderComponent } from './homeslider/homeslider.component';
import { FooterComponent } from './footer/footer.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
// { path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
// { path: '**', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutComponent, ContactComponent, NavigationComponent, HomesliderComponent, FooterComponent];
除此之外,我在 home-component.html 页面上包含了 owl-carousel 代码,我没有使用 owl-carousel npm
在 angular-cli.json 中包含所有支持的 css 和 js 文件
"styles": [
"styles.css",
"assets/owl-carousel/owl.carousel.css",
"assets/owl-carousel/owl.theme.css",
"assets/owl-carousel/owl.transitions.css",
"assets/template/tabcontent.css",
"assets/threeDslider/css/threeDstyles.css"
],
"scripts": [
"assets/owl-carousel/owl.carousel.js",
"assets/owl-carousel/slider.js",
"assets/threeDslider/js/modernizr.custom.53451.js"
],
请建议我任何解决方案,任何关于使用 Angular 5 或类似的东西创建静态网站的教程也将很有帮助,已经用谷歌搜索并最终在此处发布任何帮助表示赞赏
谢谢
解决方案
推荐阅读
- extjs - 如何在 Ext.define 中实现 IF 语句
- javascript - 如何避免在 Json Server 或 JWT 中进行身份验证
- visual-studio-2019 - 是否有一个命令可以找到引用组件的所有用法?
- c# - 日志读取——最后一行是否完整?
- ios - 在多个 Pickerviews 中实现功能的建议?
- r - Rmarkdown:代码块和结果的不同背景颜色(绘图)
- python - 在 sklearn 中训练神经网络时如何保存学习进度?
- python-3.x - scrapy:嵌套的 ItemLoader 生成包含 n(n-1) 个字段的输出
- javascript - 需要解释javascript中的递归反向单链表代码
- vb.net - 通过 VB 脚本编写 SharePoint 中的内容类型