NativeScript Angular：具有属性的自定义组件的registerElement

Question

我想将自定义NS核心/第三方组件集成到Angular模板中。我的组件的属性也应该在模板中设置。

鉴于从tns所生成的样品，我已做了以下步骤：

1. 登记自己的组件：

registerElement("TestView",() => require("./test-view").TestView);

创建元件：

import observable = require("data/observable"); 
import stackLayout = require("ui/layouts/stack-layout"); 
import label = require("ui/label"); 
import button = require("ui/button"); 
import { View } from "ui/core/view"; 
import { Property, PropertyChangeData, PropertyMetadata, PropertyMetadataSettings } from "ui/core/dependency-observable"; 

export class TestView extends stackLayout.StackLayout { 

public static userNameProperty = new Property(
    "userName", 
    "TestView", 
    new PropertyMetadata("", PropertyMetadataSettings.None) 
); 

public get userName(): string { 
    return this._getValue(TestView.userNameProperty); 
} 

public set userName(newName: string) { 
    this._setValue(TestView.userNameProperty, newName); 
} 

constructor() { 
    super(); 

    var counter: number = 0; 

    var lbl = new label.Label(); 
    var btn = new button.Button(); 
    btn.text = "Tap me " + this.userName + "!"; 
    btn.on(button.Button.tapEvent, (args: observable.EventData) => { 
      lbl.text = "Tap " + counter++; 
     }); 

     this.addChild(lbl); 
     this.addChild(btn); 
    } 
} 

使用它在角模板：

<StackLayout class="p-20"> 
    <TestView userName="Felix"></TestView> 
</StackLayout> 

的组件显示，但按钮文本不显示 “点击我[用户名]”，因为userName的未定义。

传递参数作为组件属性的正确方法是什么？

更新

读完Data Binding和Properties，我增强上面的代码样品与userName属性的定义。但它仍然没有设置，相当令人沮丧... 任何人都可以提供一些见解吗？非常感谢。

Answer 1

终于搞定了。 必须有建立的数据通过在Property类型ui/core/dependency-observable模块（见上面的代码）的封装属性userName

角模板和定制组件 TestView之间

1. 结合。

2. 该组件通过将组件的userName源属性绑定到按钮目标文本属性（您也可以通过默认BindingContext设置此属性）来将该组件绑定到按钮上。

var btn = new button.Button(); 
var buttonBindingOptions = { 
    expression: "'Tap me ' + userName + '!'", 
    sourceProperty: "userName", 
    targetProperty: "text", 
    twoWay: false 
}; 
btn.bind(buttonBindingOptions, this); 

在父Appcomponent用户可以通过动态地设置这样的：

app.component.ts：

export class AppComponent { 
    user : string; 

    constructor() { 
     this.user = "Felix"; 

     setTimeout(()=> {this.user = "Other"}, 1000); 
    } 
} 

app.html：

<TestView [userName]="user"></TestView>