替代Angular 2/4中根组件的登录表单

Question

我的应用程序中的所有内部页面都有页眉、页脚和工具栏组件。

这是我的根组件：

@Component({
  selector: 'app-root',
  template: `
    <app-header></app-header>
    <main id="content">
      <app-toolbar></app-toolbar>
      <router-outlet></router-outlet>
    </main>
    <app-footer></app-footer>`,
}) 
export class AppComponent { ... }

路由表如下：

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [LoginGuard]},
  { path: 'login', component: LoginComponent},
    ...
];

显示登录表单时，将显示页眉、页脚和工具栏。我不希望它们出现在登录页面上。如果可能的话，我希望我的LoginComponent替换登录页面上的AppComponent。

Answer 1

我正在开发一个类似的应用程序。我所做的是用路径路由登录页面：“。登录路由到管理组件，它作为一个具有页眉、页脚和侧边栏的父组件。这个管理组件有一个带有路由器出口的主视图，我在那里路由所有的子组件，像这个admin/form1，admin/form2等等。