Angular：如何将动态组件作为mat-cell子元素追加并正常工作？

要实现动态组件作为mat-cell的子元素插入，同时保证组件内Angular指令（如mat-icon、mat-tooltip、*ngIf）正常工作，需要结合正确的注入器上下文和组件挂载位置配置，具体步骤如下：

核心修改点 #

1. 使用当前指令的注入器而非根注入器，确保组件能继承父组件的依赖（如翻译服务、Material组件的提供者）
2. 指定hostElement为mat-cell的原生元素，让组件作为子元素插入
3. 将组件关联到应用的变更检测树，保证视图更新正常

指令代码实现 #

import { Directive, ElementRef, Injector, ViewContainerRef, ApplicationRef, Input, OnInit } from '@angular/core';
import { ComponentRef, createComponent } from '@angular/core';
import { ActionButtonsComponent } from './action-buttons.component'; // 替换为你的操作组件路径

@Directive({
  selector: '[tableActions]'
})
export class TableActionsDirective implements OnInit {
  @Input() row: any;
  @Input() editAction: boolean;
  @Input() actionInputData: any;

  constructor(
    private _viewContainerRef: ViewContainerRef,
    private _injector: Injector,
    private _appRef: ApplicationRef,
    private _elementRef: ElementRef
  ) {}

  ngOnInit(): void {
    this.renderActionComponent();
  }

  private renderActionComponent(): void {
    // 创建组件时指定挂载到mat-cell内部，使用当前指令的注入器
    const componentRef: ComponentRef<ActionButtonsComponent> = createComponent(ActionButtonsComponent, {
      injector: this._injector,
      hostElement: this._elementRef.nativeElement,
      viewContainerRef: this._viewContainerRef
    });

    // 传递输入参数给操作组件
    componentRef.instance.row = this.row;
    componentRef.instance.editAction = this.editAction;
    componentRef.instance.actionInputData = this.actionInputData;

    // 将组件加入应用变更检测树，确保视图更新
    this._appRef.attachView(componentRef.hostView);

    // 指令销毁时清理组件
    componentRef.onDestroy(() => {
      this._appRef.detachView(componentRef.hostView);
    });
  }
}

操作组件的输入属性定义 #

确保你的操作组件正确声明输入属性，接收从指令传递过来的数据：

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

@Component({
  selector: 'app-action-buttons',
  templateUrl: './action-buttons.component.html'
})
export class ActionButtonsComponent {
  @Input() row: any;
  @Input() editAction: boolean;
  @Input() actionInputData: any;

  editRow(row: any): void {
    // 这里实现你的编辑逻辑
    console.log('编辑行数据：', row);
  }
}

为什么之前的方法失效？ #

• 方法1（ViewContainerRef直接创建）：默认情况下ViewContainerRef.createComponent()会将组件插入到指令所在元素的兄弟节点位置，而非子元素，通过指定hostElement可以修改挂载目标。
• 方法2（Renderer2追加）：使用根注入器this._appRef.injector导致组件无法获取父组件的依赖上下文，比如mat-tooltip需要的提供者、翻译服务等，改用当前指令的_injector即可继承这些依赖。

额外注意事项 #

• 确保操作组件已在模块中声明（或作为独立组件导入）
• 相关依赖模块（如MatIconModule、MatTooltipModule、TranslateModule）已导入到当前模块或独立组件的imports数组中

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