Angular ：将动态创建的零部件附加为目标元素的子项

它开始对我起作用，通过执行以下步骤，

1. 确保将导入添加(CommonModule, MatIconModule, MatButtonModule)到要动态呈现的组件

2. 使用setInput方法创建角分量所需的绑定，否则绑定将不适用于@Input

3. 运行子组件的更改检测，以便使用componentRef.changeDetectorRef.detectChanges();检测组件更改

渲染组件

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-table-action-container',
  standalone: true,
  imports: [CommonModule, MatIconModule, MatButtonModule],
  template: `
  <button mat-button color="primary" *ngIf="show">
    asdf
    <mat-icon color="primary"></mat-icon>
  </button>
  <button mat-button color="primary" *ngIf="!show">
    qwer
    <mat-icon color="primary"></mat-icon>
  </button>
  `,
  styleUrl: './table-action-container.component.scss',
})
export class TableActionContainerComponent {
  @Input() show = false;
}

指令

import {
  ApplicationRef,
  ComponentRef,
  Directive,
  ElementRef,
  Input,
  Renderer2,
  createComponent,
} from '@angular/core';
import { TableActionContainerComponent } from './table-action-container/table-action-container.component';

@Directive({
  selector: '[appTableActions]',
  standalone: true,
})
export class TableActionsDirective {
  @Input() show = false;
  constructor(
    private _appRef: ApplicationRef,
    private _renderer: Renderer2,
    private _elementRef: ElementRef
  ) {}

  ngOnInit() {
    const component = TableActionContainerComponent;
    let componentRef: ComponentRef<any> = createComponent(component, {
      environmentInjector: this._appRef.injector,
    });
    componentRef.setInput('show', this.show);

    this._renderer.appendChild(
      this._elementRef.nativeElement as HTMLElement,
      componentRef.location.nativeElement
    );
    componentRef.changeDetectorRef.detectChanges();
  }
}

html片段

  ...
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Action</th>
    <td
      mat-cell
      *matCellDef="let element;let index = index"
      appTableActions
      [show]="index % 2 === 0"
    ></td>
  </ng-container>
  ...

Stackblitz Demo