4

angular 2遅延ルーティングを使用して、単純なangular 2 Webサイトを開発しています。flickity スライダーを使用してホームページにスライダーを実装します。問題は、アプリ コンポーネント (ルート コンポーネント) でスライダー コンポーネントを宣言するときです。

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>

スライダーは問題なくレンダリングされますが、遅延読み込みを使用して router-outlet で呼び出されるホームページ コンポーネントでスライダー コンポーネントを宣言すると、画像は表示されますが、スライダーは機能しません。

ホームページ.コンポーネント

<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 に答える