Question

我正在开发一个简单的角度2网站，使用角度2懒惰路由。我使用flickity滑块在主页中实现一个滑块，问题是：当我在app组件（root compoenent）中声明滑块组件

时

app.component

<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>

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

主-page.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);

Answer 1

多次阅读flickity doc之后，我想出来了：使用WebPack时我们必须添加

account_type_changed?

Answer 2

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

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

您可以在documentation

中详细了解封装

与路由器插座一起使用时，Angular 2组件无法正确呈现

2 个答案: