Тип: Ссылка на несколько объектов разных типов, расширенных от одного базового типа

Question

Я использую Angular 2 с TypeScript.

У меня есть BaseType компоненту

@Component({}) 
export class BaseType { 
    protected state: string; 
    constructor() { } 
    setState(state : string) { 
     this.state = state; 
    } 
} 

Я простирающийся то же самое ComponentOne и ComponentTwo путем расширения выше BaseType

ComponentOne

@Component({}) 
export class ComponentOne extends BaseType { 

    constructor() { } 
} 

ComponentTwo

@Component({}) 
export class ComponentTwo extends BaseType { 

    constructor() { } 
} 

Я загрузке этих двух компонентов динамически в другом классе, используя следующий код (частичный код)

let component: any; 

if(/*condition to show component one*/) { 
    this.component = ComponentOne; 
} else { 
    this.component = ComponentTwo; 
} 

//Load Component 
this 
    .loader 
    .loadIntoLocation(this.component, this.el, 'field') 
    .then((res) => {}); 

Когда я использую следующие позже в том же файле:

this.component.setState("state"); 

Неисправность запуска

TypeError: this.component.setState is not a function(…) 

Какой тип я должен использовать на component (в настоящее время это any) или использовать любое литье, чтобы доступ к методу setState на this.component должен работать без проблем?

Заранее благодарен!

Answer 1

У вас проблема.

• Я сохранял ссылку на класс Component, но не экземпляр фактического компонента. Таким образом, я не могу использовать метод setState.

Что фиксируется мой код:

Угловое 2 возвращает перспективны для loadIntoLocation вместе со ссылкой на вновь созданный экземпляр компонента.

Итак, я создал другую локальную переменную с типом: ComponentRef, который может быть загружен с angular2/core.

Но это только ссылка на компонент и не содержит фактического экземпляра.

ComponentRef предоставляет другое имущество с именем instance для доступа к его методам.

Рабочий код

let componentRef: ComponentRef; 

this 
    .loader 
    .loadIntoLocation(this.component, this.el, 'field') 
    .then((res) => { 
     componentRef = res; 
     //Here it works 
     componentRef.instance.setState("state"); 
    });