nasıl dinamik bileşeni oluşturmak için bu tekniği kullanıyorum dinamik olarak oluşturulan bileşen

Question

Çıktı kullanmak:

import { 
Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver, 
Output, EventEmitter 
} from '@angular/core'; 

@Component({ 
selector: 'dynamic-component', 
template: ` 
<div #dynamicComponentContainer></div> 
`, 
}) 
export default class DynamicLayerComponent { 
currentComponent = null; 

@ViewChild('dynamicComponentContainer', { read: ViewContainerRef })  dynamicComponentContainer: ViewContainerRef; 
@Output() visibility = new EventEmitter<boolean>(); 

// component: Class for the component you want to create 
// inputs: An object with key/value pairs mapped to input name/input value 
@Input() set componentData(data: {component: any, inputs: any }) { 
console.log('setting'); 
if (!data) { 
    return; 
} 

// Inputs need to be in the following format to be resolved properly 
let inputProviders = Object.keys(data.inputs).map((inputName) => {return {provide: inputName, useValue: data.inputs[inputName]};}); 
let resolvedInputs = ReflectiveInjector.resolve(inputProviders); 

// We create an injector out of the data we want to pass down and this components injector 
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector); 

// We create a factory out of the component we want to create 
let factory = this.resolver.resolveComponentFactory(data.component); 

// We create the component using the factory and the injector 
let component = factory.create(injector); 

// We insert the component into the dom container 
this.dynamicComponentContainer.insert(component.hostView); 

// We can destroy the old component is we like by calling destroy 
if (this.currentComponent) { 
    console.log('fdsafa'); 
    this.currentComponent.destroy(); 
} 

this.currentComponent = component; 
} 

constructor(private resolver: ComponentFactoryResolver) { 
    console.log('dfsd'); 
} 
} 

Sonra bu gibi kullanabilirsiniz:

<div *ngFor="let layer of sortedItems" class="single-layer"> 
    <div> 
    <dynamic-component #DynamicLayer 
         [componentData]="{ 
    component: layer.componentClass, 
    inputs: { 
    layerItem: layer, 
    sortFilter: sortFilter 
    } 
}" 
         (visibility)="setLayerVisibility(layer, $event)"> 
    </dynamic-component> 
    </div> 

sorun değilim ki Bir olaya bağlanabilir, (görünürlük) bağlanırken çalışmaz. Etkinlik gerçekleştiğinde setLayerVisibility çağrılmıyor. Bu sorunu nasıl giderebilirim? Örneğim bileşeni componentClass dayalı Tabii

Çıkışta gibi set vardır:

@Output() visibility = new EventEmitter<boolean>(); 

private visibilityChanged() { 
    this.visibility.emit(this.layerItem.visible); 
    } 

Answer 1

Fabrikanız:

factory.create(injector); 

bir componentRef nesneyi döndürür ve bu nesne ile o erişebilirsiniz bileşen kendisi.

component.instance.visibility.subscribe(v => ...);