Angular2: Dynamic load component Error

时间:2017-06-15 09:41:00

标签: angular typescript

I've got an weird error with dynamic component loading in Angular. I create a form stepper, with 5 steps. Each step is a component and there is a general one to inject them when it's needed.

class CreateComponent {
    // List of components i want to inject
    private _ContainerContractComponent = [
        ContractCivilStatusComponent,
        ContractLegalResponsableComponent,
        ContractBulletinComponent,
        ContractPaymentComponent,
        ContractSocialSecurityComponent
    ];
    // List of var i want to inject
    private _currentStudent: StudentInterface;
    private _candidature: CandidatureInterface;
    private _childObserver: Subject<any> = new Subject();
    // My step (numberBetween<1,5>)
    private _stepperStep: number;

    // My loading function
    displayContractPartComponent() {
        let componentFactory = this._componentFactoryResolver.resolveComponentFactory(
            this._ContainerContractComponent[this._stepperStep - 1]
            );
        this.dynamicComponentContainer.clear();
        let componentRef = this.dynamicComponentContainer.createComponent(componentFactory);
        componentRef.instance.candidature = this._candidature;
        componentRef.instance.student = this._currentStudent;
        componentRef.instance.childObserver = this._childObserver;
    }
}

To each loaded components i pass 3 var: candidature, student, childObserver.

Everything work's good until this morning, the compiler always pop me this error:

Error in CreateComponent: The type argument for type parameter 'T' cannot be inferred from the usage. Consider specifying the type arguments explicitly.

Type argument candidate 'ContractBulletinComponent' is not a valid type argument because it is not a supertype of candidate 'ContractCivilStatusComponent'.

Property '_model' is missing in type 'ContractCivilStatusComponent'.

It's weird because the last line (Property '_model' ...) change each round of complilation and the name of the Component too (here 'ContractBulletinComponent').

I'm searching untill this morning but i've got no idea when it can be coming from, so maybe anyone of you can help-me. Thank's

1 个答案:

答案 0 :(得分:0)

我找到了我的解决方案,探测器就是当我声明我的组件数组时:

private _ContainerContractComponent = [
    ContractCivilStatusComponent,
    ContractLegalResponsableComponent,
    ContractBulletinComponent,
    ContractPaymentComponent,
    ContractSocialSecurityComponent
];

我需要添加类型Array-any,如下所示:

private _ContainerContractComponent: Array<any> = [
  ContractCivilStatusComponent,
  ContractLegalResponsableComponent,
  ContractBulletinComponent,
  ContractPaymentComponent,
  ContractSocialSecurityComponent
];