Angular 同时加载两个组件

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应该是AppComponents child吧？

我认为它应该是这样的：

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

我找到了解决问题的办法
简而言之：BrowserAnimationsModule 有一个错误。我升级了Angular的版本，之后这个视觉缺陷就消失了。

Angular 同时加载两个组件

Angular loads two components simultaneously

angular2-routing

angular