如何在nativescript typescript中动态创建xml组件

Posted 2021-04-30

我想添加另一个组件，如布局，按钮，图像等...

这是我的xml代码，我想在stacklayout上添加xml，其ID是“chatbox”：

<GridLayout orientation="vertical" rows="*, auto" columns="auto,*, auto"> 
    <ScrollView row="0" colSpan="3" col="0">
         <StackLayout id="chatbox">
              // I want to add XML component here dynamically
         </StackLayout>
    </ScrollView>

这是我当前的打字稿代码，但它不起作用。它甚至不显示编译错误。

export function onSendButtonTap(args: EventData){

const button = <Button>args.object;
const bindingContext = <HomeViewModel>button.bindingContext;

const page = <Page>args.object;
const stack = new StackLayout();
stack.getViewById("chatbox");
const label = new Label();
label.text = "label";
stack.addChild(label);;
bindingContext.sendMessage();                }

答案

现在，如果您使用页面引用，则可以使用getViewById通过其唯一ID访问Stacklayout容器。

例如XML

<GridLayout rows="100, *">
    <Button row="0" text="Tap to add Label" tap="onButtonTap" />
    <StackLayout row="1" id="chatbox">
        // When you tap the button the label will be added here
    </StackLayout>
</GridLayout>

打字稿

onButtonTap(args: EventData): void {
    console.log("Button was pressed");
    const myButton = <Button>args.object;
    const page = myButton.page; // getting page reference via the button object

    const stack = <StackLayout>page.getViewById("chatbox");
    const label = new Label();
    label.text = "My New Label";
    stack.addChild(label);;
}

或者您可以通过某些页面生命周期事件访问页面引用

XML

<Page loaded="pageLoaded" class="page">

打字稿

export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    const stack = <StackLayout>page.getViewById("chatbox");
    const label = new Label();
    label.text = "My New Label";
    stack.addChild(label);;
}

Playground demo here（请注意，该演示使用的是带有TypeScript语言的NativeScript Core）。对于Angular，您可以在componentes构造函数中通过DI使用Angular ViewCHild或Page reference。