angular - Bir bileşene türler geçirme ve bu türü bir fabrikaya iletme


Angular 2 ve TypeScript kullanarak bir fabrika yöntemi oluşturmayı deniyorum, ama açıkça doğru yapmıyorum çünkü TSC derleyicim gereksiz bir hata veriyor:

error TS1005: ',' expected.

Bir türü bu şekilde bir bileşene @Input() olarak geçirmeye çalışıyorum:

<custom-user [componentType]="CreateMeComponent"></custom-user>

Benim bu kodum var:

// custom-user.component.ts
export class GalleriaCustomUserComponent implements OnChanges {
    @Input() componentType: any; // is there a type for types, other than any?
    @ViewChild(ComponentDirective) componentAnchor: ComponentDirective;

    ngAfterViewInit() {
        this.componentAnchor
            .createComponent<this.componentType>(); // this line throws the ',' error
    }
}

Ve yönerge şöyle görünüyor:

// component.directive.ts 
@Directive({
    selector: '[componentAnchor]'
})
export class ComponentDirective {
    constructor(
        private viewContainer: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {}

    public createComponent<MyComponent>() {  
        this.viewContainer.clear();

        let componentFactory =
            this.componentFactoryResolver.resolveComponentFactory(MyComponent);
        let componentRef = this.viewContainer.createComponent(componentFactory);

        return componentRef;
    }
}

Bu mümkün mü? Yoksa kötü bir tasarım mı?

Cevap #1

Görünüm bağlamalarında tür adlarını kullanamazsınız. Sadece bileşen örneğine veya şablon değişkenlerine yapılan referanslar desteklenir. Türü bileşenin bir özelliğine atayın, ardından onu kullanabilirsiniz:

<custom-user [componentType]="createMeComponent"></custom-user>
createMeComponent = CreateMeComponent;