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 routes:Routes=[{path:'some-path', component: YourLayoutComponent, loadChildren: ()=> import('./lazy-loaded-module/lazy-loaded.module').then(m=>m .LazyLoadedModule) }];