如何在角度2中为登录组件使用单独的布局? [英] How to use separate layout for login component in angular 2?
问题描述
我是新手.我创建了一个登录组件,它可以正常工作,但是问题是我想要从整个应用程序中分离出一个登录布局.为此需要进行哪些更改?
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?
我在Google上搜索,但每个人都提供了差异解决方案,这也是无法理解的.
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 },
];
在app.component.html
In app.component.html
<!-- page content -->
<div class="right_col" role="main">
<router-outlet></router-outlet>
</div>
<!-- /page content -->
推荐答案
在您的app.component.html
中:
<router-outlet></router-outlet>
然后创建MainComponent (main.component.ts)
并将所有主应用程序布局放入main.component.html
:
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.
然后在LoginComponent中放置没有路由器插座的其他布局,例如:
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 }
]}];
因此MainComponent将包含所有子组件的所有可重用布局和应用程序结构,而LoginComponent是独立的,并且具有自己的布局.
So MainComponent will contain all reusable layouts and app structure for any child component, while LoginComponent is independent and it has its own layout.
这篇关于如何在角度2中为登录组件使用单独的布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!