Angular：如何为父级Dashboard组件动态添加子组件？

Great question! The issue you're hitting is that Angular treats your component selector string as plain text rather than a component to render—since Angular's template compilation is static by default, it doesn't parse dynamic strings into components automatically.

Here's how to properly load components dynamically into your Material Dashboard cards:

Step 1: Update Your Card Data Structure #

Instead of storing a selector string in the content field, store the actual component class reference. This lets Angular know exactly which component to instantiate:

import { CharacterSheetComponent } from './path-to-your-character-sheet.component';
// Import other components you want to load, e.g., Card2Component, Card3Component

export class DashComponent {
  cards = [
    { title: 'Character', cols: 2, rows: 1, component: CharacterSheetComponent },
    { title: 'Card 2', cols: 1, rows: 1, component: Card2Component },
    { title: 'Card 3', cols: 1, rows: 2, component: Card3Component },
    { title: 'Card 4', cols: 1, rows: 1, component: Card4Component }
  ];
}

Step 2: Modify the Template to Add Component Containers #

Replace the {{ card.content }} in your mat-card-content with an ng-template marked with a template reference variable. This acts as a container where Angular will mount your dynamic components:

<div class="grid-container">
  <h1 class="mat-h1">Dashboard</h1>
  <mat-grid-list cols="2" rowHeight="350px">
    <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item>Expand</button>
              <button mat-menu-item>Remove</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <!-- Container for dynamic components -->
          <ng-template #componentContainer></ng-template>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

Step 3: Dynamically Load Components in the Component Class #

Use Angular's ViewContainerRef API to create and mount each component into its corresponding container. For Angular 13+, you can do this directly without ComponentFactoryResolver:

import { Component, ViewChildren, QueryList, ViewContainerRef, AfterViewInit } from '@angular/core';
import { CharacterSheetComponent } from './path-to-your-character-sheet.component';
// Import your other components here

export class DashComponent implements AfterViewInit {
  // Get references to all component containers in the template
  @ViewChildren('componentContainer', { read: ViewContainerRef }) 
  containers!: QueryList<ViewContainerRef>;

  cards = [
    { title: 'Character', cols: 2, rows: 1, component: CharacterSheetComponent },
    { title: 'Card 2', cols: 1, rows: 1, component: Card2Component },
    { title: 'Card 3', cols: 1, rows: 2, component: Card3Component },
    { title: 'Card 4', cols: 1, rows: 1, component: Card4Component }
  ];

  ngAfterViewInit(): void {
    // Loop through each container and load the corresponding component
    this.containers.forEach((container, index) => {
      const card = this.cards[index];
      if (card.component) {
        // Create and mount the component in the container
        container.createComponent(card.component);
      }
    });
  }
}

Optional: For Older Angular Versions (Pre-9) #

If you're using Angular 8 or earlier, you'll need to:

1. Add your dynamic components to the entryComponents array in your module (this tells Angular to compile them even if they're not referenced in static templates):

import { NgModule } from '@angular/core';
import { DashComponent } from './dash.component';
import { CharacterSheetComponent } from './path-to-your-character-sheet.component';
// Import other components

@NgModule({
  declarations: [DashComponent, CharacterSheetComponent, Card2Component, Card3Component, Card4Component],
  entryComponents: [CharacterSheetComponent, Card2Component, Card3Component, Card4Component]
})
export class YourModule { }

2. Use ComponentFactoryResolver to create the component factory before mounting:

import { Component, ViewChildren, QueryList, ViewContainerRef, AfterViewInit, ComponentFactoryResolver } from '@angular/core';

export class DashComponent implements AfterViewInit {
  @ViewChildren('componentContainer', { read: ViewContainerRef }) 
  containers!: QueryList<ViewContainerRef>;

  cards = [...]; // Same as before

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit(): void {
    this.containers.forEach((container, index) => {
      const card = this.cards[index];
      if (card.component) {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(card.component);
        container.createComponent(componentFactory);
      }
    });
  }
}

This approach works because we're explicitly telling Angular to instantiate the component class and attach it to the DOM container we've defined, rather than trying to parse a string as a component selector.

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