4

我正在开发一个简单的 angular 2 网站，使用 angular 2 惰性路由。我使用flickity滑块在主页中实现滑块，问题是：当我在应用程序组件（根组​​件）中声明滑块组件时

应用程序组件

<app-topnav></app-topnav>
<app-navbar></app-navbar>
<app-home-slider></app-home-slider>  <------- the slider component !
<router-outlet></router-outlet>
<hr class="divider">
<app-footer></app-footer>

滑块渲染没有问题，但是当我在使用延迟加载在路由器插座中调用的主页组件中声明滑块组件时，图片在那里但滑块不起作用，

主页.component

<app-home-slider></app-home-slider>  <------- the slider component !
<app-plaques></app-plaques>

app.routing.ts

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

const routes: Routes = [
  { path: 'Accueil-*', loadChildren: './Pages/home-page/home-page.module#HomePageModule' },
  { path: 'A-propos-*', loadChildren: './Pages/about-page/about-page.module#AboutPageModule' },
  { path: 'Contact-*', loadChildren: './Pages/contact-page/contact-page.module#ContactPageModule' },
  { path: 'Maladies-*', loadChildren: './Pages/diseases-page/diseases-page.module#DiseasesPageModule' },
  { path: 'Pharmacie-*', loadChildren: './Pages/drugs-page/drugs-page.module#DrugsPageModule' },
  { path: 'Laboratoire-*', loadChildren: './Pages/laboratory-page/laboratory-page.module#LaboratoryPageModule' },
  { path: 'Paiements-assurances-*', loadChildren: './Pages/payments-page/payments-page.module#PaymentsPageModule' },
  { path: 'Formules-sante-*', loadChildren: './Pages/products-page/products-page.module#ProductsPageModule' },
  { path: 'Symptomes-signes-*', loadChildren: './Pages/symptomes-page/symptomes-page.module#SymptomesPageModule' },
  { path: 'Rendez-vous-*', loadChildren: './Pages/appointments-page/appointments-page.module#AppointmentsPageModule' },
  { path: 'Docteurs-*', loadChildren: './Pages/symptomes-page/symptomes-page.module#SymptomesPageModule' },
  { path: 'Blog-*', loadChildren: './Pages/blog-page/blog-page.module#BlogPageModule' },

];

export const AppRoutes = RouterModule.forRoot(routes);
4

2 回答 2

0

实际上这不是实际的答案，为了解决这个问题，我只是将封装编辑为无，您可以在组件中这样做：

@Component({
  selector: 'my-random',
  templateUrl: 'my-random.component.html',
  encapsulation: ViewEncapsulation.None <---------- ADD THIS
})

您可以在文档中阅读有关封装的更多信息

于 2018-05-30T16:56:13.803 回答
0

多次阅读 flickity 文档后，我想通了：使用 WebPack 时，我们必须添加

var Flickity = require('flickity');
于 2017-01-25T17:03:06.660 回答