Làm thế nào để sử dụng đầu ra trong động tạo ra thành phần

Question

Tôi đang sử dụng kỹ thuật này để tự động tạo ra thành phần:

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'); 
} 
} 

Và sau đó tôi sử dụng nó như thế:

<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> 

Vấn đề là tôi không có thể liên kết với một sự kiện, nó không hoạt động khi liên kết đến (khả năng hiển thị). SetLayerVisibility không được gọi khi sự kiện xảy ra. Cách khắc phục sự cố đó?

Dĩ nhiên thành phần mẫu của tôi dựa trên componentClass có @Output thiết như:

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

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

Answer 1

nhà máy của bạn:

factory.create(injector); 

sẽ trả về một đối tượng ComponentRef, và với đối tượng này, bạn có thể truy cập thành phần chính nó.

Bạn có thể đăng ký vào trường hợp qua:

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