具有 angular 路由器出口的弹性布局（弹性盒）

Question

我试图将 2 个元素并排放置，其中一个占屏幕的 25%，另一个是 angular 路由器出口，它占据了容器的其余部分。使用以下代码，屏幕两侧的两个元素都会在中间显示 space。 ** 部分是有问题的

  <div class="container"
         fxLayout>
    <admin-route-menu fxFlex="25%" fxShow.lt-sm="false"></admin-route-menu>
    <router-outlet fxFlex></router-outlet>
  </div>

看起来像

左边的 admin-route-menu 标签只是基本的 html 和 css，其中 html 有一个 mat-list。路由器插座可以根据 angular 规格采用任何元素。如果这也有帮助，我可以包括管理路由菜单。

我也尝试过使用常规的弹性盒子，但结果是一样的。

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .wrapper-left
{
  background: #fcc;
}
.wrapper > .wrapper-right
{
  background: #ccf;
  flex: 1;
}

感谢任何帮助，谢谢

Answer 1

对于遇到类似问题的任何人，问题已通过

解决

<div class="container"
         fxLayout>
    <div fxFlex="25%" fxShow.lt-sm="false">
      <admin-route-menu></admin-route-menu>
    </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  </div>

基本上总是将 div 与 angular flex 布局模块一起使用，因为一些自定义元素不能很好地配合它，例如路由器插座

Answer 2

@dinamix 提供的方案效果很好。所以，我会解释这个问题背后的原因。

由于您已将 flex 属性赋予 router-outlet 的明显原因，您遇到的问题是预料之中的。因此 router-outlet 占据了所有 space 左边（这里的宽度）。

如果理解 Angular 不会将 router-outlet 替换为与路由对应的组件，那么这种混淆应该会消失。相反，它将组件附加到 router-outlet.

旁边

因此，通过将 router-outlet 包裹在一个容器中并设置 flex 将使 router-outlet 保持不变，并且其兄弟项（Vendor-form 在你的例子）附加 angular.

具有 angular 路由器出口的弹性布局（弹性盒）

flex layout (flexbox) with angular router outlet

angular

css

flexbox

angular-flex-layout

router-outlet