Angular 4路由特定路径的重复组件答案

【问题标题】：Angular 4 routing duplicate component for a particular pathAngular 4路由特定路径的重复组件
【发布时间】：2018-04-24 17:04:59
【问题描述】：

我有一个奇怪的问题，当直接启动特定路由时，组件会在 dom 中添加两次，但是从主页导航时它工作正常。

问题在于contact 路由ContactComponent

你可以在这个网站上查看直播

转到http://ootybookings.in/#/main/contact
可以看到联系人组件添加了两次
现在点击顶部的主页菜单/链接，然后点击联系人菜单/链接
现在副本不见了

所有其他路线都很好。只有联系路线会造成这个问题。

配置

    "@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 和其他网站上检查过类似的问题，但找不到任何解决方案

【问题讨论】：

这通常发生在编译器遇到错误并且没有链接到路由时。我看到了大量的控制台错误，所以我猜它与编译错误有关。
@Z.Bagley 编译错误将预先显示。这不是那个。您看到的那些控制台错误是由于谷歌地图引起的警告。
@Madhan，您是否尝试过使用 anableTracing 进行调试，一个问题可能是在两个地方定义的联系路线 - angular.io/guide/router#remove-duplicate-hero-routes
角度编译器（由客户端下载或在服务器上运行）中断（错误）时可能发生的运行时错误。重复是通常，因为角度编译器无法正确渲染 DOM。可能是由于元素的指令编写不正确，或者带有异步加载不正确的viewchild，等等。经常遇到这种情况，并且从来没有路由原因。

标签： angular angular-router angular-mdl

【解决方案1】：

我猜路由不是问题，我用的是Angular Mdl

我在两个不同的地方提到了<dialog-outlet></dialog-outlet>（Mdl 对话框需要），这导致了这个问题。不知道为什么它会影响特定组件。删除之后，路由就可以正常工作了。

【讨论】：