如何移除Angular组件的包裹元素以保证Grid布局正常生效？

问题背景 #

原本正常工作的Grid布局：

<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|

将每行重构为app-row-component组件后，布局失效：
父组件代码：

<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>

此时布局变为：

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

原因是Angular会自动为组件添加一层宿主元素，导致外层Grid将整个组件视为单个单元格，破坏了原有的列规则。

解决办法 #

1. 让组件宿主元素不参与布局（推荐方案） #

通过组件元数据的host配置，给组件宿主元素设置display: contents，浏览器会忽略该元素的布局，直接把内部的div作为外层Grid的子元素：

@Component({
  selector: 'app-row-component',
  template: `
    <div>Row {{row}} Col 1</div>
    <div>Row {{row}} Col 2</div>
  `,
  host: {
    'style.display': 'contents'
  }
})
export class RowComponent {
  @Input() row!: number;
}

修改后，组件的宿主元素不会占用Grid单元格，内部的两个div会直接参与外层Grid的布局，恢复预期效果。

2. 嵌套Grid布局 #

如果不想修改组件宿主样式，可以调整外层Grid为单列布局，同时给每个行组件内部设置Grid：

外层Grid修改：

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

行组件添加样式：

@Component({
  selector: 'app-row-component',
  template: `
    <div>Row {{row}} Col 1</div>
    <div>Row {{row}} Col 2</div>
  `,
  styles: [`
    :host {
      display: grid;
      grid-template-columns: auto auto;
      width: 100%;
    }
  `]
})
export class RowComponent {
  @Input() row!: number;
}

每个行组件本身成为一个Grid容器，内部的div分成两列，外层Grid负责垂直排列这些行组件，最终显示效果和原布局一致。

3. 使用属性型指令替代组件（可选） #

如果只是需要复用行内的内容渲染逻辑，也可以把行组件改成属性型指令，这样就不会产生额外的宿主元素：

创建指令：

@Directive({
  selector: '[appRow]'
})
export class RowDirective {
  @Input() appRow!: number;

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  ngOnInit() {
    this.viewContainer.createEmbeddedView(this.templateRef, {
      $implicit: this.appRow
    });
  }
}

父组件使用：

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

这种方式不会添加额外的包裹元素，直接渲染需要的div，适合逻辑简单的场景。

内容的提问来源于stack exchange，提问作者C_Z_