带有角度路由器出口的 flex 布局（flexbox）

Posted 2023-02-23

【中文标题】带有角度路由器出口的 flex 布局（flexbox）

【英文标题】：flex layout (flexbox) with angular router outlet

【发布时间】：2018-06-07 18:12:15

【问题描述】：

我正在尝试将 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;

感谢任何帮助，谢谢

【问题讨论】：

使用常规 Flexbox，这些规则有效：jsfiddle.net/6d8r4ffk ... justify-content 设置为 space-between，或者您的表单在 right 包装器中右对齐

如果您添加工作代码 sn-p，我们将能够提供正确的答案。

@LGSon 根据要求添加了更多代码。你是对的，它通常可以工作，这就是为什么我认为这可能是弹性盒和角度路由器的角度问题。

由于我们仍然没有 工作 代码 sn-p 可以重现您描述的问题，因此无需多说。

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

【参考方案2】：

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

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

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

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

【讨论】：

感谢您的详细解释！