2016-11-15 19 views
0

動的コンポーネント作成(resolveComponentFactory) で作業しているので、静的@Input()プロパティでうまく動作しています。しかし、ダイナミックなセッターでは機能しません。動的コンポーネントプロパティのセッティング角度2

私はできません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); 

    } 

このプロパティは存在しないため、エラーが発生します。コンポーネントインスタンスをチェックしてそのセッターがプロトタイプに存在する

+2

はあなたが何をしようとして示している[MCVE]もらえますか? – jonrsharpe

+1

これがなぜ問題になるのかわかりません。 'myPropVar'はプロパティの名前と一致する文字列です(' lockMessage')。 @Input()にアクセスする必要はありません。エラーメッセージが表示されますか? –

+0

はい、私の投稿を更新しました – Velidan

答えて

0

undefinedという理由は、動的コンポーネントにlockMessageという名前の「独自の」プロパティがないことです。そのプロパティ(セッター)は、DynamicComponent.prototypeに属します。

のはtypescriptですが、次のコードをコンパイルする方法を見てみましょう:

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

関連する問題