Angular动态注入组件数据未在主组件显示问题排查

问题分析 #

你当前通过ngComponentOutlet加载Component2时，仅传递了组件类型，但未将数据正确传递给Component2实例。尽管数据已到达Chat组件，但Component2的someData属性初始化时为空，且未绑定输入属性，导致*ngFor无数据可渲染，因此仅显示表头。

解决方案 #

1. 为Component2添加输入属性 #

在Component2中声明@Input()属性，用于接收外部传递的数据：

// component2.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2 {
  @Input() someData: any[] = []; // 定义输入属性接收数据
}

2. 扩展Message接口存储组件数据 #

修改message.ts，新增字段用于存储要传递给动态组件的数据：

// message.ts
import { Type } from '@angular/core';

export interface Message{
    text: string;
    sender: string;
    timeStamp: Date;
    component?: Type<any>;
    componentData?: any[]; // 新增：存储组件所需数据集
}

3. 创建消息时携带组件数据 #

在Chat组件中创建消息对象时，将目标数据存入componentData字段：

// chat.component.ts 代码片段
const newMessage: Message = {
  text: response.gptResponse,
  sender: "Your Booking Companion",
  timeStamp: new Date(),
  component: Component2,
  componentData: yourActualDataArray // 替换为实际要传递的数据数组
};
this.messages.push(newMessage);

4. 使用ngComponentOutletInputs传递数据（Angular 14+） #

在Chat组件模板中，通过ngComponentOutletInputs将数据绑定到动态加载的Component2：

<!-- chat.component.html -->
<ng-container *ngFor="let message of messages; let i=index">
  <div class="mb-3 col-10 position-relative bottom-0 start-50 translate-middle-x">
    <span class="message_sender">{{message.sender}}</span>
    <p>{{message.text}}</p>
    <ng-container *ngIf="message.component">
      <ng-template 
        [ngComponentOutlet]="message.component"
        [ngComponentOutletInputs]="{ someData: message.componentData }">
      </ng-template>
    </ng-container>
  </div>    
</ng-container>

兼容Angular 13及以下版本（使用Injector） #

如果你的Angular版本低于14，需通过自定义Injector传递数据：

• 在Chat组件中添加创建注入器的方法：

// chat.component.ts
import { Injector } from '@angular/core';

createComponentInjector(data: any[]): Injector {
  return Injector.create({
    providers: [
      { provide: 'ComponentData', useValue: data }
    ]
  });
}

• 模板中绑定注入器：

<!-- chat.component.html -->
<ng-template 
  [ngComponentOutlet]="message.component"
  [ngComponentOutletInjector]="createComponentInjector(message.componentData)">
</ng-template>

• 在Component2中注入数据：

// component2.component.ts
import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2 {
  someData: any[] = [];

  constructor(@Inject('ComponentData') data: any[]) {
    this.someData = data;
  }
}

为什么之前的方案无效 #

• @Output事件：该机制用于子组件向父组件传递数据，而你需要的是父组件向子组件传值，方向完全相反，因此无效。
• setTimeout：组件初始化时根本未接收到数据，延迟执行无法让组件获取未绑定的外部数据，自然无法触发表体渲染。

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