Angular中无法替换为<ng-template>时，能否复用同一<ng-container>？

我有一个子组件，需要在其child.html文件中多次展示某段HTML代码，这段代码嵌套在<ng-container>标签内（且无法将其替换为<ng-template>标签）。请问是否可以在同一.html文件中多次复用该<ng-container>？

代码示例 #

Parent.ts

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    standalone: true
})
export class ParentComponent {
    @Input() form!: FormGroup;
    @Input() id!: string;
}

Parent.html

<app-hello-world
    [id]="id"
></app-hello-world>

子组件.ts

import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'app-hello-world',
    templateUrl: './hello-world.component.html',
    standalone: true
})
export class HelloWorldComponent {
    @Input() form!: FormGroup;
    @Input() id!: string;
    @ViewChild('helloWorld') helloWorldView!: ElementRef;
}

子组件.html

<div #helloWorld [formGroup]="form">
    <!-- first show--> 
    <ng-container #hello>
        <p>Hello world </p>
    </ng-container>

   <!-- second show--> 
      <ng-container [ngTemplateOutlet]="hello">
   </ng-container>
</div>

遇到的错误 #

尝试使用ngTemplateOutlet实现复用时，出现如下类型不匹配错误：

error TS2322: Type 'HTMLElement' is not assignable to type 'TemplateRef<any>'. <ng-container [ngTemplateOutlet]="hello">

核心原因 #

<ng-container #hello>会被Angular编译渲染成普通的HTMLElement，而ngTemplateOutlet要求传入的是TemplateRef类型的模板引用，两者类型不兼容，所以报错。

方式一：抽离内容到<ng-template>（推荐） #

既然不能替换原有<ng-container>，可以把它内部的内容提取到<ng-template>中，原位置和需要复用的地方都通过ngTemplateOutlet渲染这个模板，既保留原有结构，又实现复用：

修改后的子组件.html：

<div #helloWorld [formGroup]="form">
    <!-- 原位置展示 -->
    <ng-container [ngTemplateOutlet]="helloTemplate"></ng-container>

    <!-- 复用展示 -->
    <ng-container [ngTemplateOutlet]="helloTemplate"></ng-container>

    <!-- 定义可复用的模板 -->
    <ng-template #helloTemplate>
        <p>Hello world </p>
    </ng-template>
</div>

这种方式完全符合Angular的声明式编程模式，内容的响应式绑定也能正常工作。

方式二：手动克隆DOM（不推荐） #

如果一定要直接复用<ng-container>的DOM元素，可以通过操作原生DOM实现，但这种方式会脱离Angular的变更检测机制，若内容包含响应式绑定，克隆后的元素无法同步更新：

1. 修改子组件.ts，添加视图引用和生命周期钩子：

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'app-hello-world',
    templateUrl: './hello-world.component.html',
    standalone: true
})
export class HelloWorldComponent implements AfterViewInit {
    @Input() form!: FormGroup;
    @Input() id!: string;
    @ViewChild('helloWorld') helloWorldView!: ElementRef<HTMLElement>;
    @ViewChild('hello') helloContainer!: ElementRef<HTMLElement>;

    ngAfterViewInit() {
        // 克隆原有容器的内容并插入到父容器中
        const clonedContent = this.helloContainer.nativeElement.cloneNode(true);
        this.helloWorldView.nativeElement.appendChild(clonedContent);
    }
}

2. 子组件.html保留原结构即可：

<div #helloWorld [formGroup]="form">
    <!-- first show--> 
    <ng-container #hello>
        <p>Hello world </p>
    </ng-container>
</div>

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