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>