動態組件屬性的設置器Angular 2

我正在使用動態組件創建（resolveComponentFactory），因此它在靜態@Input（）屬性下工作良好。但對於動態設置器而言，它不起作用。我不能這樣做this.componentReference.instance[myPropVar]= someValue 與創建內部組件的setter。動態組件屬性的設置器Angular 2

這可能嗎？謝謝！在我的動態組件

的屬性設置爲：

@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); 

    }

並且它拋出一個錯誤，因爲該屬性不存在。我檢查了組件實例並且該設置器存在於原型中

來源

2016-11-15 Velidan

你能給出[MCVE]演示你想要做什麼？ – jonrsharpe

我不明白爲什麼這會是一個問題。 'myPropVar'是一個匹配屬性名稱的字符串（'lockMessage'），對吧？如果只是必須訪問它，則不需要'@Input（）'。你有錯誤信息嗎？ –

是的，我更新了我的帖子 – Velidan

您得到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

來源

2016-11-15 19:15:21 yurzui

動態組件屬性的設置器Angular 2

回答

相關問題