如何实现点击按钮时在class为myBlock的div中添加Angular组件

Hey there! To add a component dynamically when clicking your button into the .myBlock container, you'll need to use Angular's dynamic component loading APIs. Here's a step-by-step breakdown:

Step 1: Update Your Template #

First, add a template reference variable to your .myBlock div so we can access it as a component container:

<div class="myExample">
  <button (click)="addComponent()">Add Dynamic Component</button>
</div>
<div class="myBlock" #dynamicContainer></div>

Step 2: Prepare Your Dynamic Component #

Let's assume you have a component you want to add (e.g., DynamicComponent). Make sure it's properly declared in your Angular module (or exported if it's in a separate module).

Step 3: Implement the Parent Component Logic #

Depending on your Angular version, the code will vary slightly:

For Angular 13+ (Modern Ivy Approach) #

This is the recommended method, as ComponentFactoryResolver is deprecated in newer versions:

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component'; // Import your target component

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  // Get reference to the container div as a ViewContainerRef
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) 
  private dynamicContainer!: ViewContainerRef;

  addComponent(): void {
    // Optional: Clear existing components in the container before adding a new one
    this.dynamicContainer.clear();

    // Create and attach the dynamic component to the container
    const componentRef = this.dynamicContainer.createComponent(DynamicComponent);

    // Optional: Pass data to the dynamic component
    // componentRef.instance.yourInputProperty = 'Hello from parent!';

    // Optional: Listen to events emitted by the dynamic component
    // componentRef.instance.yourOutputEvent.subscribe(data => {
    //   console.log('Received data:', data);
    // });
  }
}

For Pre-Angular 13 (Using ComponentFactoryResolver) #

If you're on an older version, you'll need to use the resolver to create the component factory:

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) 
  private dynamicContainer!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent(): void {
    this.dynamicContainer.clear();
    
    // Resolve the component factory
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    
    // Create and attach the component to the container
    const componentRef = this.dynamicContainer.createComponent(componentFactory);

    // Same optional data/event handling as above
  }
}

Important for pre-Angular 13: You must add DynamicComponent to the entryComponents array in your module:

@NgModule({
  declarations: [ParentComponent, DynamicComponent],
  entryComponents: [DynamicComponent] // Required for dynamic loading in older versions
})
export class AppModule {}

Key Notes #

• ViewContainerRef is the core API here—it enables dynamic manipulation of components in the DOM.
• Use clear() if you want to replace existing components instead of stacking multiple instances.
• Interact with the dynamic component via its instance property to set inputs or subscribe to outputs.

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