Question

我有一个奇怪的问题，当直接启动特定路由时，组件在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和其他网站上检查过类似的问题，但找不到任何解决方案

Answer 1

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

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

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

1 个答案: