angular - 如何读取 Angular 2 中组件输入属性绑定(bind)的字符串值？

Question

我的 angular2 应用程序中有一个简单的表单输入组件，其中包含一个 @Input绑定(bind)到属性 [dataProperty] .您可能已经猜到了，[dataProperty]属性是格式的字符串值:[dataProperty]="modelObject.childObj.prop" , 其中modelObject是在我的整个应用程序中共享的模型。基本上，我正在使用这个 @Input属性将模型从父组件传递到我的 <custom-text-input>组件，然后由 [ngModel] 绑定(bind)到嵌套组件的输入。

一切都在我的 Controller 中按预期工作；即当我访问 this.dataProperty返回输入绑定(bind)到的模型上的值。然而，我似乎无法找到的是如何访问传递给 [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() {}

}

用例:

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

基本上，当我去访问this.DataProperty它从组件 Controller 返回“Cornelius”。是否可以访问字符串文字以便我可以捕获 "modelObject.detail.name"来 self 的 Controller 的字符串？

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
    }

}

希望这对您有所帮助!