时间戳

首页 > 解决方案 > Angular - 如何解决冲突的布局

angular - Angular - 如何解决冲突的布局

问题描述

在我的 Angular-11 应用程序中，我使用了两种不同的布局：

  1. 登陆页面
  2. 主页

我正在使用 AdminLTE-3 主题

登陆页面有自己的布局，并且没有侧边栏。其布局的body类不同：

<body class="hold-transition layout-top-nav layout-fixed layout-navbar-fixed layout-footer-fixed">
  <div class="wrapper">
    <app-landing-topnavbar></app-landing-topnavbar>
    <div class="wrapper">
        <router-outlet></router-outlet>
    </div>
    <app-landing-footernavbar></app-landing-footernavbar>
  </div>
</body>

主要布局：

<body class="hold-transition sidebar-mini layout-fixed">
  <div class="wrapper">
    <app-headerbar></app-headerbar>
    <app-sidebar></app-sidebar>
    <div class="wrapper">
      <router-outlet></router-outlet>
    </div>
    <app-footerbar></app-footerbar>
  </div>
</body>

这是 index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>iDriver</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <app-root></app-root>
</body>

</html>

默认情况下，应用程序应加载登录页面。但是当用户成功登录时，它会重定向到使用主布局的主应用程序

我的观察是，当用户呈现登录页面时，页面会向右移动，就好像它有侧面一样，这是不应该的。这应该只用于主页。

但是当我在登录页面布局的正文中复制该类时：

<body class="hold-transition layout-top-nav layout-fixed layout-navbar-fixed layout-footer-fixed">

并用它来替换index.html中的普通，登陆页面就可以了。

我如何最终解决这个问题？

谢谢

标签： angular

解决方案

我认为你需要重新考虑你的路由。您可能不需要（第三个）主要应用程序组件来呈现在主页和登录页面之间共享的内容。在该组件中，您放置一个路由器出口并设置一个路由器结构，该结构根据路由（url）呈现相关的子组件。

推荐阅读