Angular 9在同一应用程序中使用两种不同的布局

Question

我的应用程序包含两种不同的布局。一种布局是应用程序，我们在其中显示顶部导航和侧边栏。

<app-nav></app-nav>
<div>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
</div>

第二种布局是登录和注册页面，其中没有导航栏和侧边栏。

最简单的解决方案是基于当前路由将ngIf添加到两个元素。但我更喜欢避免它。原因是我们在这些组件中有代码，我们不想在不需要的地方加载。

这个问题有更好的解决方案吗？

Answer 1

让AppComponent包含一个router-outlet作为模板。

@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor() {
}
}

然后将路线包括为：

const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: AppComponent,
canActivate: [LanguageGuard]
},
{
path: ':lang',
component: LanguageComponent,
children: [
{
path: 'partner',
loadChildren: () => import('./partner/partner.module').then(m => m.PartnerModule)
},
...ClientRoutes,
...AuthRoutes
]
}
];

我的项目对partner和ClientRoutes/AuthRoutes有不同的布局

合作伙伴：

const routes: Routes = [{
path: '',
component: PartnerLayoutComponent,
children: [
{
path: '',
component: HomeComponent
},
{
path: 'profile',
component: ProfileComponent
}
]
}];

这是ClientRoutes/AuthRoutes:的内容

export const ClientRoutes: Routes = [{
path: '',
component: ClientLayoutComponent,
children: [
{
path: '',
component: HomeComponent
},
{
path: 'sofa',
component: SofaComponent
}
]
}];

然后您将我的PartnerModule更改为您的login模块，并延迟加载它。

但不是每个用户都需要登录吗？也许只是把注册过程放在那个模块里。

Answer 2

如果你懒洋洋地加载模块，这很容易：

1. 添加第二个"；布局"；带有<router-outlet>的页面

2. 在你的路线中，这样定义你的路线：

   const-routs:routes=[｛path:'some-path'，component:YourLayoutComponent，loadChildren:；