角度同时加载两个组件

Question

我有一个应用程序，它使用angular2作为前端部分。有时我得到了相当奇怪的错误：登录到应用程序后，我同时看到两个组件（登录组件和主要组件）。

因此，在上面的屏幕截图中，不应该看到登录功能的输入。

它是所提供页面的HTML代码 下面列出了app.component.html的内容：

<form name="header" class="form-horizontal" >
<div class="navbar-fixed-top cometflowHeader">
    <label>CometFlow</label>
</div>
</form>

<div class="jumbotron" style="background-color: #fff; border: 3px; border-color: black;">
    <div class="classol-sm-12">
        <router-outlet></router-outlet>
    </div>
</div>

路由配置：

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full'},

  // otherwise redirect to home
  {path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes, {useHash: true});

@NgModule({
  imports: [
      ...,
      routing
  ],
  bootstrap: [AppComponent]
})

有人可以指点我应该在哪里寻找问题吗？因为现在我不知道为什么会发生这种情况。我在浏览器的控制台中没有看到任何错误。

Answer 1

我相信您的路由不正确。 HomeComponent应该是AppComponent的孩子，对吧？

我认为它应该是这样的：

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        pathMatch: 'full'
      },

      // otherwise redirect to home
      { path: '**', redirectTo: '' }
    ]
  }
];

或者像这样：

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        pathMatch: 'full'
      },
      {
        path: 'login',
        component: LoginComponent
      },
      // otherwise redirect to home
      { path: '**', redirectTo: '' }
    ]
  }
];

您的<router-outlet></router-outlet>应该是哪个组件的出口？

Answer 2

我为我的问题找到了解决方案here
简而言之：BrowserAnimationsModule存在错误。我升级了Angular的版本，之后这个视觉缺陷就消失了。