如何在angular 2中为登录组件使用单独的布局? [英] How to use separate layout for login component in angular 2?

问题描述

我是角度的新手.我创建了一个登录组件，它工作正常，但问题是我想要一个与整个应用程序分开的登录布局.为此需要进行哪些更改?

我在谷歌上搜索，但每个人都给出了无法理解的差异解决方案.

const appRoutes: Routes = [{ path: 'alert/:id', 组件: AlertDetailComponent },{ path: 'alerts', 组件: AlertsComponent },{ path: 'dashboard', 组件: EriskDashboardComponent },{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },{ 路径:'登录'，组件:LoginComponent }，];

在 app.component.html 中

<div class="right_col" role="main"><路由器插座></路由器插座>

<!--/页面内容-->

解决方案

在你的 app.component.html 中:

然后创建 MainComponent (main.component.ts) 并将您所有的主应用程序布局放在 main.component.html 中:

<div class="right_col" role="main"><路由器插座></路由器插座>

<!--/页面内容-->

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

然后在您的 LoginComponent 中放置不同的布局，无需路由器插座，例如:

<div class="登录">...您的登录布局

然后将您的路由修改为如下所示:

const appRoutes: Routes = [{路径:'登录'，组件:登录组件}，{path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full',孩子们: [{ path: 'alert/:id', 组件: AlertDetailComponent },{ path: 'alerts', 组件: AlertsComponent },{ 路径:'仪表板'，组件:EriskDashboardComponent }]}];

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

I am new in angular. I create a login component , it works fine fine but issue is that I want a separate layout of login from whole app. What changes required for that?

I search on google but everyone give diff solution which not understandable also.

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 },  
];

In app.component.html

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

解决方案

In your app.component.html:

<router-outlet></router-outlet>

Then create MainComponent (main.component.ts) and put all of your main app layout in main.component.html:

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

This component will be parent for each your regular app component.

Then in your LoginComponent put different layout without router-outlet, for example:

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

Then modify your routing to be something like that:

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 }
  ]}];

So MainComponent will contain all reusable layouts and app structure for any child component, while LoginComponent is independent and it has its own layout.

这篇关于如何在angular 2中为登录组件使用单独的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！