javascript - example - pasar parametros entre componentes angular 4

Manejar @Input y @Output para el componente creado dinámicamente en Angular 2

Question

¿Cómo manejar / proporcionar las propiedades @Input y @Output para los componentes creados dinámicamente en Angular 2?

La idea es crear dinámicamente (en este caso) el Subcomponente cuando se llama al método createSub . Bifurcaciones bien, pero ¿cómo puedo proporcionar datos para las propiedades @Input en el Subcomponente . Además, ¿cómo manejar / suscribirse a los eventos @Output que proporciona el Subcomponente?

Ejemplo: ( Ambos componentes están en el mismo NgModule )

AppComponent

@Component({
selector: ''app-root''
})
export class AppComponent {
someData: ''asdfasf''
constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
onClick() {
// do something
}
}

Subcomponente

@Component({
selector: ''app-sub''
})
export class SubComponent {
@Input(''data'') someData: string;
@Output(''onClick'') onClick = new EventEmitter();
}

Answer 1

Encontré el siguiente código para generar componentes sobre la marcha desde una cadena ( angular2 generar componente desde solo una cadena ) y creé una directiva compileBoundHtml a partir de ella que pasa datos de entrada (no maneja salidas pero creo que la misma estrategia se aplicaría de manera Podrías modificar esto):

 @Directive({selector: ''[compileBoundHtml]'', exportAs: ''compileBoundHtmlDirective''})
export class CompileBoundHtmlDirective {
// input must be same as selector so it can be named as property on the DOM element it''s on
@Input() compileBoundHtml: string;
@Input() inputs?: {[x: string]: any};
// keep reference to temp component (created below) so it can be garbage collected
protected cmpRef: ComponentRef<any>;
constructor( private vc: ViewContainerRef,
private compiler: Compiler,
private injector: Injector,
private m: NgModuleRef<any>) {
this.cmpRef = undefined;
}
/**
* Compile new temporary component using input string as template,
* and then insert adjacently into directive''s viewContainerRef
*/
ngOnChanges() {
class TmpClass {
[x: string]: any;
}
// create component and module temps
const tmpCmp = Component({template: this.compileBoundHtml})(TmpClass);
// note: switch to using annotations here so coverage sees this function
@NgModule({imports: [/*your modules that have directives/components on them need to be passed here, potential for circular references unfortunately*/], declarations: [tmpCmp]})
class TmpModule {};
this.compiler.compileModuleAndAllComponentsAsync(TmpModule)
.then((factories) => {
// create and insert component (from the only compiled component factory) into the container view
const f = factories.componentFactories[0];
this.cmpRef = f.create(this.injector, [], null, this.m);
Object.assign(this.cmpRef.instance, this.inputs);
this.vc.insert(this.cmpRef.hostView);
});
}
/**
* Destroy temporary component when directive is destroyed
*/
ngOnDestroy() {
if (this.cmpRef) {
this.cmpRef.destroy();
}
}
}

La modificación importante está en la adición de:

Object.assign(this.cmpRef.instance, this.inputs);

Básicamente, copia los valores que desea que estén en el nuevo componente en la clase de componente tmp para que puedan usarse en los componentes generados.

Sería utilizado como:

<div [compileBoundHtml]="someContentThatHasComponentHtmlInIt" [inputs]="{anInput: anInputValue}"></div>

Espero que esto salve a alguien la enorme cantidad de Google que tenía que hacer.

Answer 2

Proporcionar datos para @Input es muy fácil. Usted ha nombrado a su componente app-sub y tiene una propiedad @Input llamada data. Proporcionar esta información se puede hacer haciendo esto:

<app-sub [data]="whateverdatayouwant"></app-sub>

Answer 3

Puede enlazarlo fácilmente cuando cree el componente:

createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.someData = { data: ''123'' }; // send data to input
ref.onClick.subscribe( // subscribe to event emitter
(event: any) => {
console.log(''click'');
}
)
ref.changeDetectorRef.detectChanges();
return ref;
}

El envío de datos es muy sencillo, solo haga ref.someData = data donde data es la información que desea enviar.

Obtener datos de la salida también es muy fácil, ya que es un EventEmitter que simplemente puede suscribirse y el código que pase se ejecutará cada vez que emit() un valor desde el componente.

Answer 4

Si conoce el tipo de componente que desea agregar, creo que puede usar otro enfoque.

En su aplicación de componente raíz de HTML:

<div *ngIf="functionHasCalled">
<app-sub [data]="dataInput" (onClick)="onSubComponentClick()"></app-sub>
</div>

En su aplicación de componentes de componentes de root:

private functionHasCalled:boolean = false;
private dataInput:string;
onClick(){
//And you can initialize the input property also if you need
this.dataInput = ''asfsdfasdf'';
this.functionHasCalled = true;
}
onSubComponentClick(){
}

Answer 5

createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length,
ref.instance.model = {Which you like to send}
ref.instance.outPut = (data) =>{ //will get called from from SubComponent}
this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
SubComponent{
public model;
public outPut = <any>{};
constructor(){ console.log("Your input will be seen here",this.model) }
sendDataOnClick(){
this.outPut(inputData)
}
}