如何在Angular中渲染通过代码初始化的自定义组件实例

问题核心说明 #

你当前的实现思路不符合Angular的组件渲染逻辑：Angular组件的实例必须由框架本身接管初始化、依赖注入、生命周期和渲染流程，你手动new出来的组件只是普通JS对象，没有和Angular渲染树绑定，自然无法直接在模板中渲染。

方案一：常规列表渲染（推荐99%场景使用） #

这个方案不需要手动创建组件实例，符合Angular声明式渲染最佳实践，实现成本最低：

1. 调整UserComponent的参数接收方式，用@Input替代构造函数注入

// User Component TS
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent {
  // 用@Input接收父组件传值
  @Input() name: string = '';
}

2. 调整UsersComponent的存储结构，不存组件实例，存用户数据

// Users Component TS
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
})
export class UsersComponent implements OnInit {
  // 存储用户数据，而非组件实例
  users: string[] = [];

  ngOnInit(): void {
    this.users.push('Test User');
  }

  // 按钮触发添加新用户的方法示例
  addNewUser(name: string) {
    this.users.push(name);
  }
}

3. 调整UsersComponent模板，循环时直接调用app-user组件传值

<!-- Users Component HTML -->
<div class="users">
  <ul class="users__list">
    <li *ngFor="let userName of users">
      <app-user [name]="userName"></app-user>
    </li>
  </ul>
</div>

方案二：代码动态创建组件实例（仅适合特殊动态场景） #

如果你确实有需求要通过代码手动控制组件的创建，可以用Angular提供的ViewContainerRefAPI实现：

1. 先保留调整后的带@Input的UserComponent（和方案一一致）
2. 在UsersComponent模板中添加组件插入的容器标记

<!-- Users Component HTML -->
<div class="users">
  <ul class="users__list">
    <!-- 标记插入容器 -->
    <ng-container #userInsertContainer></ng-container>
  </ul>
</div>
<button (click)="addUserByCode('新用户')">点击添加用户</button>

3. UsersComponent中获取容器引用，调用API创建组件

// Users Component TS
import { Component, OnInit, ViewChild, ViewContainerRef, ComponentRef } from '@angular/core';
import { UserComponent } from '../user/user.component';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
})
export class UsersComponent implements OnInit {
  // 获取插入容器的ViewContainerRef
  @ViewChild('userInsertContainer', { static: true, read: ViewContainerRef }) 
  private userContainer!: ViewContainerRef;

  ngOnInit(): void {
    this.addUserByCode('Test User');
  }

  addUserByCode(name: string) {
    // 由Angular框架创建组件实例
    const userComponentRef: ComponentRef<UserComponent> = this.userContainer.createComponent(UserComponent);
    // 给组件实例赋值
    userComponentRef.instance.name = name;
    // 如果需要销毁可以调用 userComponentRef.destroy()
  }
}

原写法问题说明 #

你之前模板里写{{ user }}输出的是你手动new的JS对象的默认toString结果，也就是[object Object]，Angular没有自动渲染自定义组件实例的能力，必须通过上述两种方式实现。

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