Comment accéder à la fonction lors de l'utilisation d'un composant d'injection dynamique dans Angular - Angular

J'ai un composant où j'injecte dynamiquement un autre composant. Veuillez vous référer au code ci-dessous:

getID() {
const componentRef = this.componentFactoryResolver
.resolveComponentFactory(CodesComponent).create(this.injector);
componentRef.instance.terms = this.terms;
this.appRef.attachView(componentRef.hostView);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement;
$(domElem).insertAfter($(event.target).closest("tr"));
}

Il y a aussi une fonction dans mon composant:

sayHello() {
console.log("hi");
}

Et mon CodesComponent ressemble à ci-dessous:

<p (click) = "sayHello()"></p>

Maintenant la question est comment puis-je appeler sayHello() fonction de composant créé dynamiquement?

Réponses:

Pour votre cas d'utilisation, je vous recommanderais d'utiliser l'injection de dépendance angulaire à injecter le composant parent dans votre composant dynamique.

Voici un travail Démo StackBlitz pour toi.

Code dans votre composant parent

import {
Component, ViewChild, AfterContentInit, ComponentFactoryResolver,
Compiler, ViewContainerRef, NgModule, NgModuleRef
} from "@angular/core";


import { BrowserModule } from "@angular/platform-browser";


@Component({
selector: "app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterContentInit {
@ViewChild("vc", { read: ViewContainerRef }) _container: ViewContainerRef;
private cmpRef;

constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private compiler: Compiler,
private _m: NgModuleRef<any>) { }

ngAfterContentInit() {
this.getID();
}

public sayHello(): void{
alert("Hello!");
}

private getID(): void {
@Component({
template: `<h2>This is a dynamic component</h2>
<p (click)="_parent.sayHello()">Click me!</p>`
})
class DynamicComponent {
constructor(public _parent: AppComponent) { }
}
@NgModule({
imports: [
BrowserModule
],
declarations: [DynamicComponent],
}) class DynamicModule { }

const mod = this.compiler.compileModuleAndAllComponentsSync(DynamicModule);
const factory = mod.componentFactories.find((comp) =>
comp.componentType === DynamicComponent
);

this.cmpRef = this._container.createComponent(factory);
}
}