Angular组件如何根据变量动态渲染模板中的子组件？

Hey there! Let's break down how to solve this dynamic component rendering issue in Angular. The problem you're hitting is that when you bind a string like <app-menu id="1"></app-menu> using {{component}}, Angular treats it as plain text instead of spinning up the actual AppMenuComponent. Here are the best ways to fix this:

This is Angular's built-in directive for dynamic component rendering, and it's the easiest approach if you're using Angular 13 or later. It handles component instantiation and input passing out of the box.

Step 1: Update your SlotComponent template and class #

import { Component } from '@angular/core';
import { AppMenuComponent } from './app-menu.component'; // Import your target component

@Component({
  selector: 'app-slot',
  template: `
    <ng-container *ngComponentOutlet="activeComponent; inputs: componentInputs"></ng-container>
  `
})
export class SlotComponent {
  activeComponent: any; // Holds the component class to render
  componentInputs: Record<string, any> = {}; // Holds props to pass to the component

  // Call this method to switch/render components
  renderComponent(componentClass: any, inputs: Record<string, any>) {
    this.activeComponent = componentClass;
    this.componentInputs = inputs;
  }
}

Step 2: Use it from a parent component #

In your parent component's template:

<app-slot #slot></app-slot>
<button (click)="slot.renderComponent(AppMenuComponent, { id: 1 })">Render Menu Component</button>

Don't forget to import AppMenuComponent in the parent component too!

If you need more granular control over component lifecycle (like manual destruction or custom injection), this older method is still reliable.

Step 1: Set up the SlotComponent #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core';
import { AppMenuComponent } from './app-menu.component';

@Component({
  selector: 'app-slot',
  template: '<div #componentContainer></div>'
})
export class SlotComponent {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector
  ) {}

  renderComponent(componentClass: any, props: Record<string, any> = {}) {
    // Clear existing components first to avoid duplicates
    this.container.clear();

    // Create a component factory and instantiate the component
    const factory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
    const componentRef = this.container.createComponent(factory, { injector: this.injector });

    // Pass props to the dynamic component instance
    Object.assign(componentRef.instance, props);
    componentRef.changeDetectorRef.detectChanges();
  }
}

Step 2: Usage matches the NgComponentOutlet approach #

Call renderComponent from the parent component to switch between components.

A quick clarification on why {{component}} or [innerHTML] doesn't work:

• Angular's interpolation ({{ }}) escapes HTML by default to prevent XSS attacks.
• Even if you use [innerHTML] to render raw HTML, Angular won't parse or compile that HTML into its component tree. It'll just render the DOM elements, but the AppMenuComponent logic won't run—because Angular doesn't recognize those tags as components in dynamically inserted HTML.

If your input is a string like "app-menu" instead of the component class, create a mapping object to convert the string to the right component:

const ComponentMap: Record<string, any> = {
  'app-menu': AppMenuComponent,
  // Add other components here (e.g., 'app-button': AppButtonComponent)
};

// Then in your SlotComponent, add a helper method:
renderComponentByTag(tagName: string, props: Record<string, any>) {
  const componentClass = ComponentMap[tagName];
  if (componentClass) {
    this.renderComponent(componentClass, props);
    // Or use NgComponentOutlet approach:
    // this.activeComponent = componentClass;
    // this.componentInputs = props;
  }
}

Now you can call slot.renderComponentByTag('app-menu', { id: 1 }) to render the menu component from a string tag.

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