7

我正在尝试将 2 个元素彼此相邻放置，其中一个元素占据屏幕的 25%，另一个是一个角路由器插座，它占据了容器的其余部分。使用以下内容最终会在屏幕两侧使用两个元素，中间有空格。** 部分是有问题的部分

  <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。路由器插座可以根据角度规格采用任何元素。如果这也有帮助，我可以包括 admin-route-menu。

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

.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;
}

任何帮助表示赞赏，谢谢

4

2 回答 2

12

对于任何有类似问题的人，问题已通过执行解决

<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 布局模块一起使用，因为一些自定义元素不能很好地使用它，比如路由器插座

于 2017-12-29T15:15:27.187 回答
3

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

由于您将 flex 属性赋予 router-outlet 的明显原因，您遇到的问题是预期的。因此路由器插座占用了所有剩余空间（此处为宽度）。

如果人们理解 Angular 不会用与路由对应的组件替换路由器插座，那么这种混淆应该会消失。相反，它将组件附加到路由器插座旁边。

因此，通过将路由器出口包装在一个容器中并在其上设置 flex 将使路由器出口保持不变，并且 flex 效果将对其兄弟（在您的示例中为供应商形式）附加角度可见。

于 2020-09-03T05:23:39.013 回答