如何在 Web 应用程序中并排放置 Angular 组件答案

【问题标题】：How to place Angular components side by side in web app如何在 Web 应用程序中并排放置 Angular 组件
【发布时间】：2021-02-22 18:46:00
【问题描述】：

我正在尝试使用 Angular 创建一个 Web 应用程序，用户可以在其中玩纸牌游戏。可能的玩家列表应显示在左侧，游戏桌应位于玩家列表的右侧。

Example of desired layout

但是，由于我使用的是 Angular 并且玩家列表和游戏桌是不同的组件，因此首先显示玩家列表，然后在下面显示游戏桌所在的位置。 What it looks like now

我的 app.components.html 如下所示：

<h1>{{title}}</h1>
<app-pippelaars></app-pippelaars> <!--component displaying available players-->
<app-playing-table></app-playing-table> <!--component displaying playing table-->

如何让这些组件在网络应用程序中彼此相邻，而不是一个在另一个之上？

【问题讨论】：

标签： html css angular

【解决方案1】：

您可以尝试使用 flex 布局，类似这样：

在您的 scss 文件中：

:host {
 display: flex;
 width: 100%;
 
 app-pippelaars {
  width: 300px
 } 

 app-playing-table {
  flex: 1;
 }
}

更多关于 flex 布局的信息和例子你可以阅读here

【讨论】：

【解决方案2】：

自 2017 年以来，所有主流浏览器都支持 CSS 网格布局，您可以使用它来正确定位组件。要更改列的大小，您可以使用 'grid-template-columns' 属性并传递固定的 px 值或使用 小数单位 进行 响应式布局。

HTML

<div class="grid-container">
  <app-pippelaars></app-pippelaars>
  <app-playing-table></app-playing-table>
</div>

CSS

.grid-container {
   display: grid;
   grid-template-areas: "players-list  playing-table";
   grid-template-columns: 1fr 3fr;
}

 app-pippelaars { grid-area: players-list}
 app-playing-table { grid-area: playing-table}

【讨论】：