是否可以在自定义组件中获取孩子？答案

【问题标题】：Is it possible to get children in custom component?是否可以在自定义组件中获取孩子？
【发布时间】：2017-01-17 13:16:02
【问题描述】：

是否可以在自定义组件中获取子级？

<myCustomComponent>
    <Label #id1 text="ID 1"></Label>
    <Label #id2 text="ID 2"></Label>
</myCustomComponent>

有没有办法获取这两个 Lable 的引用，以便将它们定位在我的自定义组件中的 GridLayout 中？

【问题讨论】：

标签： nativescript

【解决方案1】：

除了带有 getViewById() 的选项外，还有几个选项可以查看布局的子级或其索引，以及添加、删除、插入和重置子级。

例如 page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
    <StackLayout id="st" class="p-20">
        <Label id="lbl-title" text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

page.ts

let page = <Page>args.object;
let stack = <StackLayout>page.getViewById("st");
let label = <Label>page.getViewById("lbl-title");

console.log("page.content: " + page.content); // page.content: StackLayout<st>@file:///app/main-page.xml:19:5;

console.log("stack.getChildrenCount(): " + stack.getChildrenCount()) // 3
console.log("stack.getChildAt(1): " + stack.getChildAt(1)); // stack.getChildAt(1): Button(5)@file:///app/main-page.xml:21:9;
console.log("stack.getChildIndex(label): " + stack.getChildIndex(label)); // 0

console.log("stack.parent: " + stack.parent); // stack.parent: Page(1)@file:///app/main-page.xml:7:1;

var newlabel = new Label();
newlabel.text = "new Label";
stack.addChild(newlabel);

更多关于所有支持的方法here

【讨论】：

【解决方案2】：

视图类为此目的有一个getViewById() 方法。

在 my-component.xml 中：

<StackLayout loaded="onLoaded">
    <Label id="label1" text="ID 1" mycustomattribute="Hi there."></Label>
    <Label id="label2" text="ID 2"></Label>
</StackLayout>

在 my-component.js 中：

exports.onLoaded = function(args) {

    let view = args.object;
    let label1 = view.getViewById('label1');
    console.log(label1.mycustomattribute);
    // > "Hi there."
};

【讨论】：