Angular 4 маршрутизация дублирующего компонента для определенного пути

Question

У меня есть странная проблема, что, когда конкретный маршрут запускается напрямую, компонент добавляется в дом дважды, но при переходе с главной страницы он работает нормально.

Проблема с contact маршрут ContactComponent

Вы можете проверить, что живут на этом сайте

1. Перейти на http://ootybookings.in/
2. Вы можете увидеть компонент контакта, добавленный дважды
3. Теперь нажмите на Главное меню / Ссылка вверху, а затем нажмите Контактное меню / Ссылка
4. Теперь дубликат исчез

Все остальные маршруты в порядке. Только контактный маршрут делает эту проблему.

конфиг

    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",

Маршруты

const routes: Routes = [
  {
    path: '',
    redirectTo: 'welcome',
    pathMatch: 'full'
  },
  {
    path: 'welcome',
    component: WelcomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'main',
    component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'tour-packages',
        pathMatch: 'full'
      },
      {
        path: 'tour-packages',
        component: TourPackagesComponent
      },
      {
        path: 'tour-package/:name',
        component: TourPackageDetailComponent
      },
      {
        path: 'activities',
        component: ActivitiesComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'who-we-are',
        component: WhoWeAreComponent
      },
      {
        path: 'why-ooty',
        component: WhyOotyComponent
      },
      {
        path: 'services',
        component: TourServicesComponent
      },
      {
        path: 'blogs',
        component: BlogComponent
      },
      {
        path: 'blog/:name',
        component: BlogDetailComponent
      },
      {
        path: 'offers',
        component: OffersComponent
      },
      {
        path: 'terms',
        component: TermsComponent
      },
      {
        path: 'privacy',
        component: PrivacyPolicyComponent
      },
      {
        path: 'refund',
        component: RefundPolicyComponent
      }

    ]
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Как справиться с этим. Есть ли проблема с моим модулем маршрутизации? Я проверил подобные проблемы в SO и других сайтах, но не смог найти никакого решения для этого

Answer 1

Я думаю, маршрутизация не проблема, я использую Angular Mdl

Я упомянул <dialog-outlet></dialog-outlet>(необходимо для диалогов Mdl) в двух разных местах, что приводит к этой проблеме. Не знаю, почему это повлияло на конкретный компонент. После удаления маршрут работает нормально.