直接嵌入角度组件的内容，无需包装

Question

假设我有一个像这样的网格

<div style="display:grid; grid-template-columns auto auto;">
    <div>Row 1 Col 1</div><div>Row 1 Col 2</div>
    <div>Row 2 Col 1</div><div>Row 2 Col 2</div>
</div>

结果是这样的：

|Row 1 Col 1|Row 1 Col 2|
|Row 2 Col 1|Row 2 Col 2|

完美，正是我想要的

现在假设我想重构我的代码，以便每个 row 都是一个角度组件

<div style="display:grid; grid-template-columns auto auto;">
    <app-row-component row=1></app-row-component>
    <app-row-component row=2></app-row-component>
</div>

app-row-component

看起来像这样：

<div>Row {{row}} Col 1</div> <div>Row {{row}} Col 2</div>

现在网格的样式不再起作用，因为角度将

app-row-component

的内容包裹在它自己的元素中，并且网格看起来像这样

|Row 1 Col 1 Row 1 Col 2|Row 2 Col 1 Row 2 Col 2|

这是不正确的。

有没有办法可以删除

app-row-component

的包装元素，这样我的网格样式仍然有效？或者，是否有另一种方法来组织我的样式，以便我有一个网格，其中每一行都是一个组件？

Answer 1

只需将网格样式更深一层：

<div style="display:grid; grid-template-columns: auto auto;">
      <div>Row {{row}} Col 1</div> <div>Row {{row}} Col 2</div>
    </div>

stackblitz 样本

如果你想要更高层次的样式，那么使用像这样的一些类：

<div class="row">
      <div>Row {{row}} Col 1</div> <div>Row {{row}} Col 2</div>
    </div>

<div class="table">
      <app-row-2 [row]="1"></app-row-2>
      <app-row-2 [row]="2"></app-row-2>
    </div>

还有一个简单的选择器：

.table .row {
  display: grid;
  grid-template-columns: auto auto;
}

Stackblitz 已更新。

我测试了 gre_gor 的解决方案，对我来说它没有用。也许我做错了什么。

我已经用

display: contents

更新了 stackblitz，它现在可以工作了。

Answer 2

您需要将

display: contents;

应用于

app-row-component

。
这将使 CSS 网格忽略该元素并定位其子元素。

将

styles: [":host { display: contents; }"]

添加到您的组件中。

StackBlitz 示例

Answer 3

推荐但不强制使用像

app-row-component

这样的选择器。

您可以选择不同的选择器，例如

[app-row-component]

：

<div style="display:grid; grid-template-columns auto auto;">
    <div app-row-component row=1></div>
    <div app-row-component row=2></div>
</div>