Question

我的angular2应用程序中有一个简单的表单输入组件，其中包含对@Input属性的[dataProperty]绑定。您可能已经猜到，[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() {}

}

使用案例

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

基本上，当我从组件控制器访问this.DataProperty时，它返回“Cornelius”。是否可以访问字符串文字，以便我也能从控制器中捕获"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的元素最终只是一个HTML节点。

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

我目前还不能为您创建示例，但您可以简单地获取对组件HTML的引用（在组件中使用Angular viewReference）并简单地查询其上的属性。伪代码就像

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

同样，我还没有对它进行测试，但我认为没有理由不这样做。

Answer 3

不幸的是，在这种情况下，angular 2使用从Object到string的默认转换，并且只显示DOM中熟悉的[object Object]。你无法从中获得更多信息。

此外，该对象对其父对象一无所知。请参阅：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];
    ) }    
}

Answer 4

修改

所以看起来问题是关于打印变量的名称而不是值。 那是不可能的。

您可以从控制器访问该值：

@media (max-width: 767px) { .navbar .navbar-brand { position: absolute; left: 50%; margin-left: -110px !important; display: block; } .navbar-collapse { text-align: center; } .navbar-collapse li{display:none} .collapse.navbar-collapse { background-color: #444; position: fixed; min-width: 100%; min-height: 100%; font-size: 1.3em; padding-top: 20px; transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .collapse.navbar-collapse li { display:block; margin-bottom: 15px; } }

如果您询问Interpolation，请执行以下操作：

export Class customInputComponent implements OnInit { @Input() dataProperty: string; constructor() { console.log(this.dataProperty) // would print modelObject.childObj.prop } }

更多信息：

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

如何在Angular 2中读取组件输入属性绑定的字符串值？

4 个答案: