Сеттер для свойства динамического компонента Угловой 2

Question

Я работаю с созданием динамического компонента (resolveComponentFactory) , так что он работает с статическими свойствами @Input(). Но для динамического сеттера он не работает.

Я не могу это сделать this.componentReference.instance[myPropVar]= someValue с сеттер, созданный внутри компонента.

Возможно ли это? Благодаря!

свойство сеттера в моей динамической составляющей является:

@Input() set lockMessage(val: any) { 
    if (val) { 
     console.log("Visit details -> ", val); 

    } 
    } 

это то же самое, как и в этом посте Angular 2 dynamic component creation

, но я хочу, чтобы добавить некоторые свойства, которые имеют сеттер к моему динамически созданному компоненту.

P.S. да. Я попытался настроить свое свойство на динамический компонент с этой конструкцией

/** 
    * public updateSingleComponentProp -> update single prop on component instance 
    * @param prop {string} -> property name 
    * @param val {any} -> property value 
    * @returns {void} 
    */ 
    public updateSingleComponentProp(prop: string, val: any): void { 
     let compInstance = this.componentReference.instance; 

     compInstance[prop] = val; 

     if (compInstance.hasOwnProperty(prop) || compInstance.hasOwnProperty('_' + prop)) 
      compInstance[prop] = val; 
     else 
      throw new Error("Component doesn't have this property -> " + prop); 

    } 

и он выдает сообщение об ошибке, поскольку это свойство не существует. Я проверил экземпляр компонента и установил его в прототипе

Answer 1

Причина, по которой вы получаете undefined, заключается в том, что ваш динамический компонент не имеет собственного свойства, называемого lockMessage. Это свойство (setter) принадлежит DynamicComponent.prototype.

Давайте посмотрим, как машинопись компилируется следующий код:

export class MyDynamicComponent { 
    text: string; 

    set lockMessage(val: any) { 
    if (val) { 
     console.log("Visit details -> ", val); 
    } 
    } 
} 

выход будет выглядеть следующим образом:

function MyDynamicComponent() {} 

Object.defineProperty(MyDynamicComponent.prototype, "lockMessage", { 
    set: function (val) { 
     if (val) { 
      console.log("Visit details -> ", val); 
     } 
    }, 
    enumerable: true, 
    configurable: true 
}); 

Также вы можете использовать getOwnPropertyDescriptor методу

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

Таким образом, ваше состояние может выглядеть так:

if (compInstance.hasOwnProperty(prop) || 
    compInstance.hasOwnProperty('_' + prop) || 
    Object.getOwnPropertyDescriptor(compInstance.constructor.prototype, prop)) 

И сказал, что вы должны инициализировать ваше имущество, как:

export class MyDynamicComponent { 
    text: string = '4'; 

Вот это Plunker Example