能否通过字符串插值/属性绑定插入组件选择器？Angular动态组件优化问询

Question 1: Can I insert component selectors via string interpolation or property binding? #

Short answer: No, you can't.

Angular compiles your templates at build time (or just-in-time during development) to generate component factories. When you use string interpolation like <{{ 'app-comp7' }}> or property binding to set a tag name, Angular treats that output as plain text/HTML—not as a valid component selector. It won't parse or instantiate the component from that dynamic string; those tags will just render as unrecognized HTML elements in the DOM.

Question 2: How to dynamically load components without 10 *ngIf lines? #

The cleanest, most concise way to handle this is using Angular's built-in *ngComponentOutlet directive. Here's a step-by-step implementation:

Step 1: Map component names to component classes #

In your parent component, create an object that links the string names (like 'comp7') to their corresponding component classes. First, make sure you've imported all 10 child components.

import { Component } from '@angular/core';
import { AppComp1Component } from './app-comp1.component';
import { AppComp2Component } from './app-comp2.component';
// Import the rest of your components (AppComp3 to AppComp10)

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // This property controls which component gets loaded
  activeComponent = 'comp7';

  // Map string identifiers to component classes
  componentMap = {
    comp1: AppComp1Component,
    comp2: AppComp2Component,
    comp3: AppComp3Component,
    comp4: AppComp4Component,
    comp5: AppComp5Component,
    comp6: AppComp6Component,
    comp7: AppComp7Component,
    comp8: AppComp8Component,
    comp9: AppComp9Component,
    comp10: AppComp10Component
  };
}

Step 2: Use *ngComponentOutlet in the template #

In your parent component's template, use the directive to dynamically render the component based on your activeComponent property. We use <ng-container> as a non-rendered wrapper to hold the directive:

<ng-container *ngComponentOutlet="componentMap[activeComponent]"></ng-container>

Bonus: Pass inputs/outputs (if needed) #

If you need to pass data to the dynamic component or listen to its outputs, you can extend *ngComponentOutlet with injectors or content projection. For example, to pass an input value:

1. Create a custom injector in the parent component:

import { Injector } from '@angular/core';

// Inside ParentComponent
getComponentInjector() {
  return Injector.create({
    providers: [
      { provide: 'dynamicInput', useValue: 'Hello from parent!' }
    ]
  });
}

2. Update the template to use the injector:

<ng-container 
  *ngComponentOutlet="componentMap[activeComponent]; injector: getComponentInjector()"
></ng-container>

3. Inject the value in your child component:

import { Inject } from '@angular/core';

constructor(@Inject('dynamicInput') public inputValue: string) {}

Alternative: ComponentFactoryResolver (for advanced control) #

If you need granular control over the component's lifecycle (like manually updating inputs after creation), you can use ComponentFactoryResolver with ViewContainerRef. This requires more boilerplate code, though, so it's only necessary for complex scenarios.

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