Angular：如何调用动态创建组件的构造函数？

Question

Can someone help me out how to pass on a value for the constructor of a component which is created dynamically?

This is how the component FilterComponent is created:

import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { FilterComponent } from '../filter/filter.component';

export enum FilterType {
  DateRangeFilter, SensorSelectFilter
}

@Component({
  selector: 'app-filter-collection',
  templateUrl: './filter-collection.component.html',
  styleUrls: ['./filter-collection.component.css']
})
export class FilterCollectionComponent implements OnInit {

  filters: Array<ComponentRef<FilterComponent>> = [];

  @ViewChild("messagecontainer", { read: ViewContainerRef }) entry!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  onAddDateRangeFilter() {
    const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
    const filter = this.entry.createComponent<FilterComponent>(factory);
    this.filters.push(filter);
  }

  ngOnInit(): void {
  }

}

and this is the component:

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

  constructor(private type : FilterType) {
  }

  ngOnInit(): void {

  }

}

Answer 1

I am not sure if there is a way to access the constructor. But there is a way to get the actual instance of your dynamically generated component

import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { FilterComponent } from '../filter/filter.component';

export enum FilterType {
  DateRangeFilter, SensorSelectFilter
}

@Component({
  selector: 'app-filter-collection',
  templateUrl: './filter-collection.component.html',
  styleUrls: ['./filter-collection.component.css']
})
export class FilterCollectionComponent implements OnInit {

  filters: Array<ComponentRef<FilterComponent>> = [];

  @ViewChild("messagecontainer", { read: ViewContainerRef }) entry!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  onAddDateRangeFilter() {
    const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
    const filter:ComponentRef<FilterComponent> = this.entry.createComponent<FilterComponent>(factory);
        this.filters.push(filter);
// you can use the componentRef.instance to reference any variables inside your dynamically generated component 
       filter.instance.type = FilterType.DateRangeFilter



  }

  ngOnInit(): void {
  }

}