如何在Angular中从其他组件访问并克隆指定目标组件

问题根因 #

你直接通过new CloneComponentComponent()手动实例化组件的方式不符合Angular的运行逻辑：Angular组件的实例化需要框架内部完成依赖注入、模板编译、生命周期钩子触发等流程，手动new出来的实例只有空的类结构，不会绑定模板、没有注入的服务资源，也无法被渲染到视图中。

可行解决方案 #

方案1：用*ngFor声明式动态生成（最推荐）

这种方式符合Angular的声明式开发范式，不需要手动操作DOM，维护成本最低。

1. 先修改AppComponent的TS代码，定义一个数组来控制克隆组件的数量：

import { Component } from '@angular/core';
import { CloneComponentComponent } from './clone-component/clone-component.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'UserManager';
  // 用于控制克隆组件的数量，数组元素可用来传标识/参数
  cloneList: number[] = [];

  cloneUpper(){
    console.log("Cloned!");
    // 新增一个元素即可触发视图生成一个新的组件实例
    this.cloneList.push(Date.now());
  }
}

2. 修改app.component.html模板，在目标容器位置遍历渲染组件：

<!-- 其他页面内容 -->
<button (click)="cloneUpper()">克隆组件</button>
<div id="cloneContainer">
  <!-- 遍历cloneList生成对应数量的克隆组件 -->
  <app-clone-component *ngFor="let item of cloneList"></app-clone-component>
</div>

方案2：用ViewContainerRef程序化动态创建

如果需要在逻辑中灵活控制组件的创建、销毁、参数传递，可以用Angular提供的动态组件API（Angular 13+版本写法更简化）：

1. 先在app.component.html中给容器加模板引用：

<div #cloneContainer></div>
<button (click)="cloneUpper()">克隆组件</button>

2. 修改AppComponent的TS代码，用ViewChild获取容器引用，调用API创建组件：

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { CloneComponentComponent } from './clone-component/clone-component.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'UserManager';
  // 获取cloneContainer的ViewContainerRef实例
  @ViewChild('cloneContainer', {static: true, read: ViewContainerRef}) cloneContainer!: ViewContainerRef;
  // 如果要访问已存在的单个CloneComponentComponent实例，用下面的写法
  // @ViewChild(CloneComponentComponent) existingClone!: CloneComponentComponent;

  cloneUpper(){
    console.log("Cloned!");
    // 直接创建组件实例，返回值包含组件实例、宿主元素引用等
    const componentRef = this.cloneContainer.createComponent(CloneComponentComponent);
    // 可以直接给组件实例的输入属性赋值
    // componentRef.instance.xxx = '自定义参数';
    // 手动触发变更检测（可选，部分场景需要）
    componentRef.changeDetectorRef.detectChanges();
    console.log(componentRef.instance); // 这里拿到的就是完整的组件实例
  }
}

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