如何在角度2中使用单独的登录组件布局？

Question

我是棱角分明的新人.我创建一个登录组件,它工作正常,但问题是我想从整个应用程序登录单独的布局.需要进行哪些更改？

我在google上搜索但是每个人都给出了差异解决方案,这也是不可理解的.

const appRoutes: Routes = [
{ path: 'alert/:id', component: AlertDetailComponent },
{ path: 'alerts', component: AlertsComponent },
{ path: 'dashboard', component: EriskDashboardComponent },  
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },  
];

在app.component.html中

<!-- page content -->
<div class="right_col" role="main">
    <router-outlet></router-outlet>           
</div>
<!-- /page content -->

Answer 1

在你的app.component.html:

<router-outlet></router-outlet>

然后创建MainComponent (main.component.ts)并将所有主要应用布局放入main.component.html:

<!-- page content -->
<div class="right_col" role="main">
    <router-outlet></router-outlet>           
</div>
<!-- /page content -->

此组件将是每个常规应用程序组件的父组件.

然后在您的LoginComponent中放置不同的布局而不使用router-outlet,例如:

<div class="login-wrapper">
  <div class="login">
   ... your login layout
  </div>
</div>

然后修改您的路由是这样的:

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full',
    children: [
      { path: 'alert/:id', component: AlertDetailComponent },
      { path: 'alerts', component: AlertsComponent },
      { path: 'dashboard', component: EriskDashboardComponent }
  ]}];

因此,MainComponent将包含任何子组件的所有可重用布局和应用程序结构,而LoginComponent是独立的,并且它有自己的布局.