Question

我将带有一些javascript的html / css 模板移植到角度5中，并注意到一个关键功能无法按预期工作。

基本上像模式和图片库这样的功能很大程度上依赖于javascript，在调用angular路由器后停止工作。

因此，如果从第一页导航，javascript工作正常到第二页，则 javascript不会被调用，需要进行硬刷新。

我以标准的方式路由，所以我研究了很多但却找不到什么遗失。

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SliderComponent } from './home/slider/slider.component';


const routes: Routes = [

  { path: '', component: HomeComponent},
  { path: 'slider', component: SliderComponent}
];

export const routingComponents = [
    HomeComponent,
    HeaderComponent,
    SliderComponent,
    DealsComponent,
    FeaturedProductsComponent,
    PopularBrandsComponent,
    PromisesComponent,
    FooterComponent
]

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

export class AppRoutingModule {}

和 angular-cli.json 包含

"scripts": ["assets/js/vendor.min.js", "assets/js/scripts.min.js", "assets/js/modernizr.min.js", "../node_modules/jquery/dist/jquery.min.js"]

javascript使用示例 - 通过类。

     <!-- Poduct Gallery-->
      <div class="col-md-6">
        <div class="product-gallery">
          <div class="gallery-wrapper">
            <div class="gallery-item video-btn text-center"><a href="#" data-toggle="tooltip" data-type="video" data-video="&lt;div class=&quot;wrapper&quot;&gt;&lt;div class=&quot;video-wrapper&quot;&gt;&lt;iframe class=&quot;pswp__video&quot; width=&quot;960&quot; height=&quot;640&quot; src=&quot;https://www.youtube.com/embed/CjNjcrQZtd8&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;" title="Watch video"></a></div>
          </div><span class="product-badge bg-danger">Sale</span>
          <div class="product-carousel owl-carousel gallery-wrapper">
            <div class="gallery-item" data-hash="one"><a href="assets/img/shop/single/01.jpg" data-size="1000x667"><img src="assets/img/shop/single/01.jpg" alt="Product"></a></div>
            <div class="gallery-item" data-hash="two"><a href="assets/img/shop/single/02.jpg" data-size="1000x667"><img src="assets/img/shop/single/02.jpg" alt="Product"></a></div>
            <div class="gallery-item" data-hash="three"><a href="assets/img/shop/single/03.jpg" data-size="1000x667"><img src="assets/img/shop/single/03.jpg" alt="Product"></a></div>
            <div class="gallery-item" data-hash="four"><a href="assets/img/shop/single/04.jpg" data-size="1000x667"><img src="assets/img/shop/single/04.jpg" alt="Product"></a></div>
            <div class="gallery-item" data-hash="five"><a href="assets/img/shop/single/05.jpg" data-size="1000x667"><img src="assets/img/shop/single/05.jpg" alt="Product"></a></div>
          </div>
          <ul class="product-thumbnails">
            <li class="active"><a href="#one"><img src="assets/img/shop/single/th01.jpg" alt="Product"></a></li>
            <li><a href="#two"><img src="assets/img/shop/single/th02.jpg" alt="Product"></a></li>
            <li><a href="#three"><img src="assets/img/shop/single/th03.jpg" alt="Product"></a></li>
            <li><a href="#four"><img src="assets/img/shop/single/th04.jpg" alt="Product"></a></li>
            <li><a href="#five"><img src="assets/img/shop/single/th05.jpg" alt="Product"></a></li>
          </ul>
        </div>
      </div>

模板中的两个海关javascript文件缩小了不多用于在此处发布。

更改页面或javascript停止工作时，Angular5应用程序需要硬刷新

0 个答案: