如何避免Angular为子组件生成额外标签？

问题场景 #

我在Angular 12中开发父、子组件，现有代码如下：

父组件模板 #

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <ng-container>
            <app-child-component></app-child-component>
        </ng-container>
    </div>
</div>

必须使用ng-container

子组件模板 #

<button>Click</button>

Angular默认会为子组件生成<app-child-component>包裹层，最终DOM结构为：

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <app-child-component>
            <button>Click</button>
        </app-child-component>
    </div>
</div>

我需要的最终DOM结构是直接渲染子组件内容，去掉包裹层：

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <button>Click</button>
    </div>
</div>

尝试过属性选择器<div app-child-component></div>，但会多出无用的<div>，且属性选择器无法用于ng-template元素。

解决方案 #

方案1：用ngTemplateOutlet复用子组件模板（适合带逻辑的子组件） #

步骤1：子组件暴露内部模板引用

在子组件类中，通过@ViewChild获取自身模板并暴露：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `<button>Click</button>`
})
export class ChildComponent {
  @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<any>;
}

步骤2：父组件通过ng-container渲染子组件模板

在父组件的ng-container内，先声明子组件引用，再用ngTemplateOutlet直接渲染其内部模板：

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <ng-container>
            <app-child-component #child></app-child-component>
            <ng-container *ngTemplateOutlet="child.template"></ng-container>
        </ng-container>
    </div>
</div>

注：此方式会创建子组件实例但隐藏其宿主DOM，仅渲染内部模板内容。

方案2：封装为模板型组件（适合纯UI无逻辑的子组件） #

直接将子组件定义为ng-template的属性选择器组件，避免生成额外DOM：

步骤1：创建模板组件

import { Component } from '@angular/core';

@Component({
  selector: 'ng-template[appChildTemplate]',
  template: `<button>Click</button>`
})
export class ChildTemplateComponent {}

步骤2：父组件中使用

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <ng-container appChildTemplate></ng-container>
    </div>
</div>

此方式完全无多余DOM元素，直接渲染目标内容。

方案3：隐藏子组件宿主元素（适合需保留逻辑的场景） #

在子组件元数据中设置宿主元素为隐藏，视觉上消除包裹层：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `<button>Click</button>`,
  host: {
    'style': 'display: none;'
  }
})
export class ChildComponent {}

父组件正常使用即可：

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <ng-container>
            <app-child-component></app-child-component>
        </ng-container>
    </div>
</div>

注：子组件宿主元素仍存在于DOM中，但会被隐藏，页面仅显示按钮内容。

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