首页 > 解决方案 > 使用 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 或类似的东西创建静态网站的教程也将很有帮助,已经用谷歌搜索并最终在此处发布任何帮助表示赞赏

谢谢

标签: javascriptangular

解决方案


推荐阅读