コンポーネントの入力属性バインディングの文字列値を角度2で読み取る方法は？

Question

という属性にバインドする@Inputを含むangle2 appに単純なフォーム入力コンポーネントがあります。あなたが推測したように、[dataProperty]属性は[dataProperty]="modelObject.childObj.prop"の形式の文字列値です。modelObjectは、アプリケーション全体で共有されているモデルです。基本的には、この@Input属性を使用して、親コンポーネントから<custom-text-input>コンポーネントにモデルを渡します。次に、[ngModel]によってネストされたコンポーネントの入力にバインドされます。

すべてが意図したとおりに動作し、コントローラで動作します。つまり、this.dataPropertyにアクセスすると、入力がバインドされているモデルの値が返されます。しかし、私が見つけられないように見えるのは、最初にテンプレートから[dataProperty]に渡された文字列リテラルにアクセスする方法です。

コンポーネント：

@Component{ 
    selector: "custom-text-input", 
    template: "<input type="text" [ngModel]="dataProperty"></input> 
} 

export Class customInputComponent implements OnInit { 
    @Input() dataProperty: string; 

    /** 
     ex of modelObject: { detail: { name: "Cornelius" } } 
     (^^^ would originate in parent component ^^^) 
    */ 

    constructor() {} 

} 

使用事例：私はコンポーネントコントローラからthis.DataPropertyにアクセスするために行くとき

<div class=wrapper> 
    <custom-text-input [dataProperty]="modelObject.detail.name"> 
    </custom-text-input> 
</div> 

は基本的に、それは "コーネリアス" を返します。私のコントローラから"modelObject.detail.name"文字列をキャプチャできるように、文字列リテラルにアクセスすることは可能ですか？

Answer 1

私は、プロパティのキーと値のペアを作成し、それが名前だと一緒にそうようで、それらを渡します。そして、私はこのような何かを行うことによって、プロパティ名へのアクセスを得るでしょう

<div class="wrapper"> 
    <custom-text-input [dataProperty]="{modelObject.detail.name}"> 
    </custom-text-input> 
</div> 

：

を

@Component{ 
    selector: "custom-text-input", 
    template: "<input type="text" [ngModel]="dataProperty"></input> 
} 
export Class customInputComponent { 

    dataPropertyName; 

    private _dataProperty;  
    @Input() 
    set dataProperty(keyValuePair){ 
     this._dataProperty = Object.values(keyValuePair)[0] 
     this.dataPropertyName = Object.keys(keyValuePair)[0] 
    } 
    get dataProperty(){ 
     console.log("I have the property name here:" + this.dataPropertyName) 
     return this._dataProperty 
    } 

} 

これが役立ちますように！

Answer 2

編集

質問は、変数の名前の代わりの値を印刷する程度であるようなので、それが見えます。 それはできません。あなたは、コントローラからの値にアクセスすることができます

：

{{dataProperty}} <input type="text" [ngModel]="dataProperty"></input> 

詳細情報：

https://angular.io/docs/ts/latest/guide/template-syntax.html

Answer 3

export Class customInputComponent implements OnInit { 
    @Input() dataProperty: string; 

    constructor() { 
     console.log(this.dataProperty) // would print modelObject.childObj.prop 
    } 

} 

あなたの補間について尋ねた場合は、これを行います技術的には、これが可能でなければなりません。しかし、あなたは何かを考え直さなければなりません。 dataPropertyを持つ要素は、最終的にHTMLノードにすぎません。

<custom-text-input [dataProperty]="modelObject.detail.name"> 

私はあなたのための例を作成するために、現時点での位置ではないんだけど、あなたは、単純な（コンポーネントの角度viewReferenceを使用して）コンポーネントのHTMLへの参照を取得し、単にそれに属性を照会でき。擬似コードは再度

let myString = viewref.nativeElement.getAttribute('[dataProperty]') 

のようなもの、私はそれをテストしていないだろうが、私は、これは動作しないでしょうない理由を見ません。

Answer 4

残念ながら、角度2では、オブジェクトから文字列へのデフォルトの変換が使用されています。この場合は、親しみやすいがDOMにのみ表示されます。それ以上の情報を得ることはできません。

また、オブジェクトはその親オブジェクトについて何も知らない。参照してください：Access parent's parent from javascript object

あなたはSomoの答えのようなものを使うことができます：オブジェクトのプロパティとして値を提供してください。プロパティーの名前は文字列リテラルでなければなりません。プロパティーの値は実際の値でなければなりません。

使用事例：

<div class="wrapper"> 
    <custom-text-input [dataProperty]="{'modelObject.detail.name': modelObject.detail.name}"> 
    </custom-text-input> 
</div> 

コンポーネント：あなたが

@Component{ 
    selector: "custom-text-input", 
    template: "<input type="text" [ngModel]="actualValue"></input> 
} 

export Class customInputComponent implements OnInit { 
    @Input() dataProperty: Object; 
    actualValue: string; 

    ngOnInit() { 
     console.log(Object.keys(dataProperty)[0]); 
     console.log(Object.values(dataProperty)[0]); 
     this.actualValue = Object.values(dataProperty)[0]; 
    ) }  
}