Angular 4路由重复组件为一个特定的路径

问题描述：

我有一个奇怪的问题，当一个特定的路由直接启动该组件被添加两次在DOM，但从主页面导航时，它工作正常。Angular 4路由重复组件为一个特定的路径

问题是与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编译错误将事先显示。这不是。您看到的那些控制台错误是由于Google地图造成的警告。 – Madhan

@Madhan，您是否尝试使用anableTracing进行调试，有一个问题可能是在两个地方定义的联系路由 - https://angular.io/guide/router#remove-duplicate-hero-routes –

答

我猜路由任何解决方案是不是我已经提到<dialog-outlet></dialog-outlet>这个问题，我使用Angular Mdl

（需要Mdl对话）在两个不同的地方，这导致了这个问题。不知道为什么它会影响特定的组件。删除后，路线工作正常。

Angular 4路由重复组件为一个特定的路径

相关推荐